01-HTML语法大全

一、认识html

• html：hypertext markup language，超文本标记语言，超链接（实现页面跳转）；
• html结构标准：

 //声明文档类型，由渲染引擎解析

  //根标签

  //头部标签，里面的内容是给浏览器/搜索引擎看的
     //标题标签


  //主体标签，给用户、浏览者看

• html和htm是一样的；
• 后缀名不能决定文件格式，只能决定文件打开方式；
• html标签分类：
  • 单标签;
  • 双标签、、
• html标签关系
  • 包含（嵌套）： 父子关系
  • 并列关系： 兄弟姐妹关系

二、开发工具

• Dreamweaver：历史悠久，偏设计师使用；
• sublime：轻量级的，简单、好学，有好多好用的插件；
  • 常用快捷键：

html:xt + tab	html结构代码
tab	补全标签代码
ctrl + shift + d	快速复制一行
ctrl + shift + k	快速删除一行
ctrl + 鼠标左键单击	集体输入
ctrl + h	查找替换
ctrl + f	查找
ctrl + /	注释
ctrl + l	快速选中一行
ctrl + shift + ↑（↓）	快速上移（下移）一行
查看->布局	设置行列

• webstorm：很强大、很智能，但是很大，一般电脑使用都会很快起飞。
• 现在比较流行和推荐使用的是微软推出的 vscode 开发工具，体积小、插件丰富，可以按需安装。

三、简单标签

单标签

• 注释标签：ctrl + /
• 换行标签：
，在html5中可以省略/
• 水平线标签：

  ---

双标签

• 标题标签：
  ，取值是h1-h6，一个页面中只能有一个h1。
• 段落标签：

  段落内容

  ，特点：上下自动生成空白行；
换行不会生成空白行；
• 文本标签：文本内容，早期做网站时候使用；

文本格式化标签：

• 加粗：，,工作中建议使用strong；
• 倾斜：，,工作中建议使用em；
• 删除线：,，工作中建议使用del；
• 下划线：,,工作中建议使用ins。
• 建议使用的都是更具语义化，可读性更强。

图片标签

• • src:图片的来源，必写属性；
  • 当鼠标放在图片上时显示title的内容；
  • 当图片加载失败时显示alt的内容;
  • 如果不设置图片宽高,显示图片默认大小，如果只设置其中一个，会进行等比例缩放，如果两个都设置就会按照设置的大小进行展示。

a标签(超链接)

• 登录

  • href存放目标页面的url，为必写属性；
  • 鼠标放在超链接上显示title的内容；
  • target为页面打开的方式，默认在原页面打开_self，如果设置值为_black，就会打开一个新的页面进行展示。

• 锚链接

  • 首先定义一个锚点：在标签中添加一个id属性；
  • 超链接到锚点:跳转

四、绝对路径和相对路径

• 相对路径：相对于文件自身出发
  • 文件(html文档)和图片在同一个目录(文件夹)，直接写文件名；
  • 如果图片在下一级目录里，src就为文件夹名+/+图片名称；
  • 如果图片在上一级目录里，scr就是 ../ + 图片名
• 绝对路径
  • 电脑上绝对路径：从电脑盘符开始，如F:\Documents\学习\前端学习\mage.png；
  • 互联网上绝对路径：http://...

练习：

• 四季

五、空链、压缩包下载、超链接的优化写法、特殊字符：

• 空链：当不知道跳转链接时候使用：空链

• 压缩包下载，压缩包，了解就行，工作中一般不会这样使用。

• 超链接的优化写法， 让页面中所有的标签在点击时都打开新窗口：

• 特殊字符：

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方（上标2）	²
³	立方（上标3）	³

六、中级标签

列表标签

• 无序列表

type可以取三个值，square样式为小方块、circle样式为空心小圆点、disc为实心小圆点（默认样式）。

• 有序列表

type可以更改标号样式，type可取的值为：1、a、A、i、I等，start设置从哪一个值开始依次往后排序。

• 定义列表

    
小标题
    
解释标题

    
解释标题

    
解释标题

    
解释标题

音乐标签

• ，hidden设置为true时，隐藏音乐播放器，比audio标签多一块黑色的背景。

七、跑马灯：页面自动滚动效果

• ...
  • 中间的内容可以是文字、图片，也可以是由程序生成的文字或图片；
  • behavior设置滚动的方式，alternate表示在两端之间来回滚动，scroll表示一端滚动到另一端（会重复），slide表示由一端滚动到另一端（不会重复）；
  • direction设置滚动方向，down表示向下滚动，left向左，right向右，up向上；
  • loop表示滚动的次数，-1时无限滚动；
  • scrollamount设置滚动速度，值越大滚动速度越快；
  • 设置背景音乐等。

八、几种HTML结构的快速搭建

• html:xt + tab，过渡结构；
• html:xs + tab，严格结构；
• ! + tab，html5标签结构。
  说明：各个开发软件会有所区别。

九、高级标签

meta标签

• 编码格式，在meta标签里面设置charset，英语用ascll、ansi；日文、韩文用Unicode；中文的用gbk、gbk2312；台湾big5（繁体字符）；utf-8支持180到200个国家语言，所以用utf-8基本能解析所有国家语言；
• 关键字：给搜索引擎看，主要用于SEO，(逗号使用英语格式的)；
• 网页描述：在搜索的时候会出现的描述：；
• 网页重定向：过5秒之后跳转到设定的页面;
• 告诉搜索引擎站点的作者：（不常用）；
• （不常用，了解）：
  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • noindex：文件将不被检索，但页面上的链接可以被查询；
  • follow：页面上的链接可以被查询；
  • nofollow：文件将不被检索，页面上的链接可以被查询。

link标签

• 链接外部样式表文件;
• 设置网站icon：

表格标签

• 展示数据，是对网页重构（css+div）的一个有益补充 ；
• 属性：
  • 边框属性：border；
  • 表格大小会根据内容自动进行填充，也可以自己设定；
  • 单元格之前的距离：cellspacing，默认值为2；
  • 内容和边框的距离:cellpadding；
  • 对齐方式：align，有三个值：left/right/center,如果给表格设为center，表格居中；如果给tr设置center，一行的内容居中；如果给td设置center，则某一列的内容居中，优先级：td > tr > table
• 两行三列表格：创建表格可以用快捷方式table>tr*2>td*3

   //表格
         //行
           //列
        
张珊
24
        
工程师
    

    

        
张珊
        
24
        
工程师
    

• 表格完整结构：表格拥有完整结构会对SEO更友好，但是没有的话也不要求，在thead等里面设置属性不管用，需要在对应的tr或者td中设置

    

        

            
标题
            
标题
            
标题
        
    

    

        

            
数据
            
数据
            
数据
        
        

            
数据
            
数据
            
数据
        
    

    

        

            
数据
            
数据
            
数据
        
        

            
数据
            
数据
            
数据
        
    

• 给表格添加标题：

    
表格名称
    

        
张珊
        
24
        
工程师
    

    

        
张珊
        
24
        
工程师
    

• 单元格合并
  • 同一行的单元格合并：

    
表格名称
    

        
张珊

        
工程师
    

    

        
张珊
        
24
        
工程师
    

• 同一列单元格合并：

    
表格名称
    

        
张珊
        
24
        
工程师
    

    

        
张珊
        
24

    

• 设置列标题：th,会将内容加粗，居中显示

    
表格名称
    

        
一月份
        
二月份
        
三月份
    

    

        
张珊
        
24
        
工程师
    

• 垂直方向对齐方式：valign="top/middle/bottom";
• 细线表格：设置border="1"时，其实单元格之间的线的宽度是2。设置细线表格的思路：设置表格背景色，然后再设置cellspacing="1"。
  • 练习：可以试一下建课程表

表单标签

• 输入信息，收集信息；
• 表达组成：提示信息、表单控件（输入框）、表单域；

    用户名：
    密码：
    

action:处理信息；
method：有两个值可取，get和post。get：通过地址栏提供（传输）信息，安全性差；post：通过xxx来处理信息，安全性相对较高。

• 文本输入框

  • maxlength：设置输入的最大字符长度；
  • readonly：设置输入框为只读状态；
  • value：设置默认值；
  • placeholder：提示用户进行操作

• • disable：输入框没有激活；
  • name：给输入框设置名字，以便进行区分；

• • 密码输入框：输入的信息会变成暗文，文本输入框的所有属性对密码输入框都有效；

• 单选框

  • 男 女
  • 一组单选按钮必须要设置同样的name，否则单选无效；
  • 通过checked来设置默认选中项；

• 多选框

喝酒
抽烟
烫头发

• 多行文本框
  

  • cols：控制输入字符的长度；
  • rows：控制输入的行数；

• 文件上传控件
  

• 按钮

  • 提交按钮：可以实现信息提交;
  • 普通按钮：不能提交，通常配合js使用；
  • 图片按钮：可实现信息提交功能;
  • 重置按钮：将信息重置到默认状态

• 将表单信息分组

  • 将表单内一组的内容放到中，表单名称放到
    中

    

        
个人信息提交
        用户名：
        密码：
        
    

• 表单的其它控件
  • 网址输入框：，会要求输入正确的网址格式，但是空也可以提交，以后会用js进行判断；
  • 日期控件：；
  • 时间控件：；
  • 邮件控件：,要求输入正确的邮件格式，但是空也可以提交；
  • 数字控件：，有一个上下的小三角，可以步进，每次调整的值的大小为2；
  • 滑块控件：

下拉列表

• 普通下拉列表

    下拉列表选项1
    下拉列表选项2
    下拉列表选项2

multiple:设置多选；
selected:设置默认选中项，如果不设置，默认选择第一个选项；

• 分组下拉列表：

    
        苏州
        无锡
        常州
    
    
        杭州
        温州
        绍兴
    

概述详细信息标签

    
简介
    发动机卡拉的交罚款了打飞机考虑到九分裤了打手机发开发阶段

pre 标签

• pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体。
• pre 应用：一个常见应用就是用来表示计算机的源代码。
• 注：可以导致段落断开的标签（例如

  、

  和

  标签)绝不能包含在

   所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

• pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 标签）放到

   块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

<html>
<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
  <script type="text/javascript">
    xmlDoc=loadXMLDoc("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>
</body>
</html>

• 在上面的代码中，

   标签中的特殊符号被转换为符号实体，比如 "<" 代表 "<"，">" 代表 ">"。另外，请注意绿色的代码，我们在 
   标签中使用了链接，也就是  标签。上面这段代码的显示效果如下：
   
  
   
   
   
   
   
   
   
  

• 提示1：制表符（tab）在

   标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 
   标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
  

• 提示2：如果您希望使用

   标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。
  

• 提示3：在 W3School 中，非常多页面中的源代码实例都是通过

   标签定义的，您可以参考这些页面，学习如何使用该标签。我们甚至把 
   标签与  标签结合起来使用，以获得更加精确的语义。
  

十、标签语义化

• 标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）；

• 标签语义化意义：

  • 网页结构合理；
  • 有利于SEO和搜索引擎简历良好沟通，有了良好的结构和语义，你的网页内容自然容易被搜索引擎抓取；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）；
  • 便于团队开发和维护。

• 好的语义化的网站标准：去掉样式表文件之后，结构依然很清晰。

• 标签语义化的注意事项：

  • 尽可能少的使用没有语义的标签div和span；
  • 在语义不明显时，既可以使用div或者p时，尽量使用p，因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如：font、b、i、s、u等，改用css样式；
  • 需要强调的文本，可以包含在strong或者em标签中，strong默认样式是加粗（不要用b），em是斜体（不用i）；

• 练习：古诗