珠峰HTML+CSS视频学习笔记第一天

前端描述：前端对于网站来说，通常是指网站的前台部分，包括网站的结果层和表现层，因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站前台代码实现，包括基本的html，css和JavaScript，高版本的html及css！

关于webstorm的安装和使用说明、webstorm的安装和使用示例，这里的编辑器如何使用会在后面完善，现在书写代码工具，建议用的是HBuilderX，讲解网址https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/35357

#网页的基本组成结构

  • HTML：超文本标记语言，是使用标记标签来描述网页的一种语言，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分；
  • css层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；
  • JS：是一种轻量级的编程语言

 #HTML基本结构-HTML简介

超文本标记语言是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分,正因为有规则,浏览器才知道怎样去解读你的文件但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。兼容问题

 #HTML基本结构-文档声明

  • 为了说明文档使用的超文本标记原因标准，所有的超文本标记语言文档应该以“文档类型声明”<!DOCTYPE>开头，引用一个文件类型描述或者必要情况下自定义一个文件类型的描述
  • <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前
  • <!DOCTYPE>声明不是HTML标签,它是指web浏览器关于页面使用哪个HTML版本进行编写的指令
  • 在HTML4.01中，<!DOCTYPE>声明引用DTD，因为html4.01基于SGM。DTD标记了语言的规则，这样浏览器才能正确呈现内容
  • HTML5不基于SGML，所以不需要DTD

 #HTML基本结构-head

  • <head>标签用于定义文档的头部，它是所有头部元素的容器
  • <head>中的元素可以引用脚本，指示浏览器在哪里找到样式表、提供元信息等等
  • 文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等，绝大多数文档头部包含的数据都不会真正作为内容显示给用户
  • 下面这些标题可用在head部分:<link>,<meta>,<script>,<syle>以及<title>

补充：视口 viewport meta:vp table键（移动端手机页面开发必须添加的代码）&页面小图标:<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />

 #HTML基本结构-body

  • 网页的主体部分
  • body元素定义文档的主体,用户看到的内容都在body内编写
  • body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

#标签及标签属性

html中我们用标签来进行标记,HTML标记标签通常被称为HTML标签( HTML tag)

标签语法:

由成对的尖括号和标签名组成,例如<p></p>
HML通常是成对出现的,第一个是开始标签,第二个是结束标签,例如<div></div>

标签分闭合和空标签①闭合标签由开始标签和结束标签组成，标签之间可以放内容，可以进行标签之间的嵌套②空标签：没有内容的html元素被称为空元素。空元素是在开始标签中关闭的，例如<br />

标签一般小写，闭合标签一定要有结束标签，空标签没有结束标签，不要手动去添加闭合标签

HTML标签属性

  • HTM标签可以拥有属性,属性提供了有关HTML元素的更多的信息
  • 属性总是以属性名/属性值的形式出现,多个属性名属性值之间用空格隔开;比如:name="value"
  • 属性总是在HML元素的开始标签中,标签名后面的内容

例如<img src="http://www.dhnblog.com/images/gravatar.jpg"  alt="大灰牛博客" title="大灰牛博客"〉

  • src=""放图片的路径地址;
  • alt=″″图片路径加载失败或者图片丢失时,图片的描述说明文字内容;
  • title=″″鼠标移动到图片上的文字描述说明内容;

<a href="http://www.dhnblog.com/" target="_blank">This is a link</a>

  • href=""超链接要跳转的路径地址 href="JavaScript:;"禁止默认的链接跳转
  • target="_blank"在新窗口中打开;target="_self"在当前窗口中打开

html4版本常见的标签元素/网址:http://www.zhufengpeixun.com/qianduanjishuziliao/qianduanCSSziliao/2016-06-29/456.html

html5版本新增标签/网址:http://old.zhufengpeixun.cn/qianduanjishuziliao/css3hehtml5zhuanti/2016-11-20/665.html

#常用的HTML标签完整梳理

60个参考网址https://www.w3school.com.cn/tags/index.asp

#元素和元素内容

HTML元素指的是从开始标签( start tag)到结束标签( end tag)的所有代码

注释:开始标签被称为开放标签(opening tag),结束标签被称为闭合标签(closing tag)

  • HTML元素以开始标签起始
  • HTML元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些HML元素(空标签)具有空内容( empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数HTM元素可拥有标签属性

#元素之块级元素和行内元素特点(面试题)

行内元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u
块状元素:table,dl-dt-dd,figure,figcaption,div,h1-h6,hr,ul-li,ol-li,nav,p,form
行内块状元素img,input

本身属性为display:block的元素；因为它自身的特点，我们通常使用块级元素来进行结构的搭建布局

块级元素的特点(行内与之相反)

  • 独占一行,每一个块级元素都会从新的一行重新开始
  • 排列方式:从上到下依次排布
  • 可以直接控制宽度、高度以及盒子模型的相关css属性
  • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度,高度是它本身内容的高度
  • 可以嵌套行内元素
  • ul/ol下面只能是li;dl下面只能是dt,dd;p不能包裹其他块级元素包括它本身

元素之间的相互转换
行内元素=> display: inline
块级元素=>display: block
行内块元素=>display: inline- block

#标签语义化含义及实用技巧

标签语义化一含义

  • 合适标签做合适的事情,例如文章段落用p标签,标题用h1-h6标签
  • 标签语义化为浏览器和搜索引擎服务

标签语乂化一为什么要遵循标签语义化

  1. 利于SE0优化(也就是搜索引擎的抓取,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重)
  2. 在样式丢失的时候,还是可以比较好的呈现结构
  3. 更好的支持各种终端,例如无障碍阅读和有声小说等
  4. 利于团队开发和维护,W3C给我们定了一个标准,那么团队中都遵循这个标准,那么代码的差异就会缩小,在开发和维护的时候就可以提高效率

标签语义化-日常工作中怎样遵循标签语义化

  1. 尽量减少使用无意义标签,例如span和div
  2. 尽量不使用标签本身的css属性,例如b、fonηt、s等标签,如果需要这些样式,那么使用css样式来进行添加
  3. 在需要强调的部分,使用 strong、em,但是样式尽量使用css样式来描述
  4. 表格搭建时,使用<thead>表格头部</thead><tbody>表格身体</tbody><tfoot>表格尾部</tfoot>
  5. 列表搭建时,使用<ul>无序列表</ul><o|>有序列表</ol><dl>定义列表</dl>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/webaction/p/13298542.html