HTML语法

DOCTYPE 是文档类型，这句话就是告诉浏览器：我是HTML, 请按照解析HTML的方式解析

内容

属性值加引号的规则：

如果是普通字符，可以不用加引号
如果属性名包含特殊字符，如空格，则要加引号，如
hello world

内容

比如：

需要注意的是，只要写了chekced, 复选框就会被勾上，即使写成checked="false"也会被勾上

标签自动闭合，不需要再写，也不需要多加一个斜杠

比如：

<link rel="stylesheet" href="">

标签大小写有区别吗？

功能在没有区别，但最好是用小写

HTML标签

HTML起手式

我们可以把语言改为中文

章节标签

标题 h1~h6

章节 section

文章 article

段落 p

头部 header

脚部 footer

主要内容 main

旁支内容 aside

划分 div

小tips:

©的写法： ©

全局属性：所有标签都有的属性

class

<div class="middle bordered"></div>

contenteditable 让用户可以直接编辑内容
hidden

隐藏标签

加上id以后可以调css - 加上id以后可以用js

- id.style.border = "1px solid red"
- 但不提倡用这种写法，因为这种写法对id的命名有要求，比如用parent, top, self等命名id就不行。因为window里有很多已经定义好的全局属性，不可以和这些属性同名。
- 所以不到万不得已不要用id，用class

style

设置内联样式
对于style的优先级：

- JS > HTML的style标签 > CSS

tabindex

正数，如tabindex=1 / 2/ 3/，表示按顺序访问 - 0，表示最后访问 - -1，表示不要用tab访问

title

用来显示完整内容 - 应用场景：文字超长变省略号 - 单行文字溢出：

- 调整css
- white-space: nowrap; 不要换行
- text-overflow: ellipsis 溢出的部分用....
- overflow: hidden; 溢出的部分隐藏

但我希望，当鼠标移动到省略的地方上时，可以浮动地显示完整内容，就可以在title="完整内容"，即可

内容标签

潜规则：HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格

如果想保留多处空格、回车、tab等，就要用pre

保留空格、回车键；其他标签会把多余的空格和回车键转换为一个空格
代码

- 如果需要写换行的代码，嵌套一个pre标签即可
- <pre><code>var aaa = 1; console.log(a)</code></pre>

<hr>水平分隔线
<br> 换行
ol li 有序列表
ul li 无序列表
dl + dt 要描述的对象 + dd 要描述的内容
<em>和<strong> 表示强调

em 表示语气上的强调
strong 表示内容本身很重要

quote 行内引用
blockquote 换行的引用

a标签

a标签的属性

1. herf

a链接的地址

取值：

网址：

www.baidu.com
www.baidu.com
//www.baidu.com 推荐使用这一种写法。放进浏览器会自动补全

路径:

1. - 绝对路径：/a/b/c,
1. - 相对路径：index.html和./index.html

伪协议:

1. javascript:代码; 【需要写冒号和分号】

1. 1. 应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
  2. <a href="javascript:0;"></a>
  3. 这就相当于执行一段没有意义的js代码

1. mailto:邮箱

1. 1. <a href="mailto:123@qq.com"></a>

1. tel:手机号

1. 1. <a href="tel:123456789"></a>

id: href=#id名，可以跳转到id名为Id的标签

1. 如<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签

2. target

1. 决定是在本页面还是新开一个页面打开链接
2. 取值：

1. 1. 系统内置的名字：

1. 1. 1. a_blank打开新页面
    2. a_self在当前页面打开
    3. a_top 顶部页面打开
    4. a_parent 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况

a标签的作用

跳转到外部页面
跳转到内部锚点
跳转到邮箱或电话

table标签

完整的table标签包含的元素有：

thead

tr table row 一行
th table head 表头

tbody

tr table row

td table data 数据

tfoot

<tr><td></td></tr>

<table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

效果如下图

两个表头怎么实现？

如图所示，这里有两个表头，分别是小红小明小颖这一行和数学语文英语这一列

表头都用<th></th>

数据都用<td></td>

<table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小强</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>91</td>
                <td>86</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

table的样式

table-layout:

table-layout: auto; auto表示根据内容来计算宽度
table-layout: fixed; fixed表示定宽，尽可能地让宽度平均

border-collapse 和 border-spacing用来调整表格Border的间隔

一般会设置为：

table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }

设置前：

设置后：

如果table-layout是fixed, 每一栏会是等宽，而如果是auto, 内容多的那一列会更宽一些

img标签

作用：

发出GET请求，展示图片

属性

src: 图片地址
alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
width 如果只写宽度，高度会自适应
height 如果只写高度，宽度会自适应

一个合格的前端不能让图变形！所以就只写宽度或者高度！

事件

onload 加载成功

onerror 加载失败

响应式

关键就是max-width: 100%

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  img {
      max-width: 100%;
  }

这样图片就可以自适应不同的屏幕大小

form标签

作用：

发get或者post请求，刷新页面

属性

action: 往哪里发请求

method: Get 或者 POST 控制用哪种方式请求

autocomplete 自动填充，值可以取"off"或者"on"

off：在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。
on：浏览器能够根据用户之前在表单里输入的值自动补全, 会给出填这个表单的提示

target: 在当前页面提交，还是新开一个页面提交

Input的submit和button的submit有什么区别？

Input标签里不能再有其他的标签

button标签里可以有其他的标签

 <form action="/xxx" method="GET" autocomplete="on">
        <input type="text" name="username" id="">
        <input type="submit" value="input提交">
        <button type="submit">
            <strong>button提交</strong>
        </button>
    </form>

效果如下

一个表单必须有一个type=submit的东西，要么是Input要么是button

Input标签

作用：

让用户输入内容

JS事件：

onchange, onblur, onfocus

属性：

类型type:

text 输入文本
password 输入密码
radio 单选

怎么样实现两个radio类型的Input二选一
让这两个Input有相同的name即可
比如，我们想实现男女性别二选一

 <input type="radio" name="gender"> 男
 <input type="radio" name="gender"> 女

checkbox 多选

同样的，也需要给同类型的多选框写上相同的Name

<input type="checkbox" name="hobby" id="">唱
<input type="checkbox" name="hobby" id="">跳
<input type="checkbox" name="hobby" id="">rap
<input type="checkbox" name="hobby" id="">篮球

file 上传文件

上传一个文件：<input type="file">
上传多个文件<input type="file" multiple>

textarea 文本框

需要文本框不能自由拖动，固定大小

<textarea style="resize:none; width:50%; height:300px;"></textarea>

select 选择

<select name="week" id="">
    <option value="">- 请选择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>

注意事项

一般不监听Input的click
form里的Input要有Name
form里必须有一个type=submit的input或者button才能出发submit事件

HTML总结