1. 块元素

代表元素：h1-h6，p，
div，ul，li，ol，li
特点：

  • 独占一行
  • 默认宽度为父元素宽度百分之百
  • 可以设置宽高
  1. 行内元素

代表元素：span，格式化标签
特点：

  • 一行多个
  • 宽度为内容宽度
  • 不能设置宽高
  1. 行内块元素

代表元素：img，input
特点：

  • 一行多个
  • 可以设置宽高

超链接

a标签必须有内容才能点击

属性值

  1. herf：链接的路径或者文件
  • 绝对路径（以盘符或者htttp开头的路径）
  • 相对路径（以文本出发寻找目标文件）
  1. target表示在何处打开链接
  • _self默认值，表示在本窗口打开链接的url
  • _blank表示在新窗口打开链接的url
  1. title表示鼠标放在元素时的提示文本

四种状态

：link没有被访问时的状态 蓝色
：visited访问之后的一个状态 紫色
：active被激活时候的状态 红色
：hover可以用于所有标签，表示鼠标放上去的状态

四种状态必须按照：:link :visited :hover :active

原则：爱恨原则 l v h a

链接类型：

  1. 文本链接
    <a href="mi.html">小米手机</a>
  2. 图片，视频链接
    <a href="mi.html"><img src="images/mi.jpg" alt="红米手机" /></a>
  3. 空链接
    <a href="#">空链接</a><a href="#">空链接</a>
  4. 锚链接

在要链接到的位置输入：
<p id="mi4"></p>
在要建立链接的对象上添加a标签:
<a href="#mi4">小米手机4 </a>

  • 使用a标签的href属性和其他标签的id属性相结合
    给a标签的href属性添加#名称
    给要跳转到的目标标签添加id属性，属性值为a标签的href属性值的#后面的名称
  • 使用a标签的href属性和a标签的name属性相结合
    给a标签的href属性添加#名称
    给要跳转到的目标添加a标签给一个name属性，属性值为a标签的href属性值的#后面的名称

表单元素

form标签：

表单元素可以单独使用，但是需要提交数据的时候则需要被form标签进行包裹

属性:

  1. action：数据要提交的服务器地址（一般是php文件）
  2. method:提交的方式（get和post）
  • get默认提交数据的方式
    提交的数据通过?的方式拼接在服务器地址后面 地址?name1=value1&name2=value2…..
  • post
  1. get请求的数据拼接在地址后面，而post请求的数据页面不可见，需要通过F12—-network—-点击服务器请求地址——点击headers的form data中查看到post请求发送的数据
  2. get请求数据不安全，post比较安全
  3. get传输的数据长度有限，而post不限制长度
  1. 定义表单元素：

input

属性

  1. type：input输入框的类型：

    • text：单行文本框：
      <input name="user" type="text" id="user" placeholder="请输入英文字母" /><br><br>

    • password：密码框:
      <input type="password" name="textfield" id="textfield" /><br><br>

    • radio:单选框（产生互斥效果的话需要给产生关联的单选框加上相同name属性值）:
      <input type="radio" name="sex" checked>男
      <input type="radio" name="sex">女

    • checkbox:复选框（产生关联需要添加相同的name属性值）：
      <input type="checkbox" name="checkbox" id="checkbox" checked="checked" />

<input type="checkbox" name="checkbox" id="checkbox2" /> <input type="checkbox" name="checkbox" id="checkbox3" /><br><br>

  • file：文件域:
    <input type="file" name="photo" id="photo" />
  • hidden：隐藏域:
    <input type="file" name="photo" id="photo" />
  • image：图片域（必须通过src属性引入图片地址，相当于一个图片按钮，点击时会提交表单数据，数据值为鼠标点击时的坐标）:
    <input type=“image” name=“imageField” id=“imageField” src=“tj.jpg” />
  • button：普通按钮（不会对数据进行提交）:
    <input type="button" name="button2" id="button2" value="按钮" />
  • submit：提交按钮（在form标签中点击时会提交表单数据）:
    <input type="submit" name="submit" id="submit" value="提交" />
  • reset：重置按钮（点击会使表单数据清空恢复最初状态）:
    <input type="reset" name="button" id="button" value="重置" />

！！！！！！name和value在网络传输中的作用：

name：传输数据的载体

value：传输的数据值，当没有设置value默认值的时候则输入的值就是value值，单选框和复选框没有设置默认值的情况下默认值为on

  1. placeholder和value的区别：

placeholder是输入框的默认提示内容，当聚焦输入框填写内容的时候会自动消失，当输入框中没有值得时候会自动出现，而且不会随着表单进行提交
value是输入框的默认值，当鼠标聚焦输入框的时候value值不会消失，可以进行编辑，而且提交数据时会随着表单进行提交

  1. checked单选框和复选框的默认勾选值，使用checked=”checked”，可以简写为checked
  2. selected下拉列表的默认选项，option的属性
  3. size:表示下拉列表显示的选项个数，添加在select标签上

语义化标签：

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用

语义化的网页的好处,最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。

面试题：

  1. post和get请求的区别

get请求的数据拼接在地址后面，而post请求的数据页面不可见，需要通过F12—-network—-点击服务器请求地址——点击headers的form data中查看到post请求发送的数据

  1. get请求数据不安全，post比较安全
  2. get传输的数据长度有限，而post不限制长度
  1. name和value在网络传输过程中的作用

name：传输数据的载体
value：传输的数据值，当没有设置value默认值的时候则输入的值就是value值，单选框和复选框没有设置默认值的情况下默认值为on

  1. label标签的作用
  1. 用来与input表单元素产生关联，发生聚焦
    使用label标签的for属性和input的id属性相结合产生关联
  1. Input标签常见的type属性的取值
  • text
  • password
  • radio
  • checkbox
  • file
  • hidden
  • image
  • button
  • submit
  • reset
  • name
  • value