前端学习笔记（一）—— 常用HTML标签

前端学习笔记（一）—— 常用HTML标签

前言

接触前端开发也有些时间了，现在想把自己在前端开发和工作中所学到的、有用的知识在此以笔记的形式记录下来，给有需要的童鞋借鉴学习。当然，个人能力和技术有限，文章中可能出现错误或不足的地方，还望童鞋们不吝指教，我定及时修改

• h1-h6：标题标签，从h1到h6字体大小依次减小，h1代表页面最重要的标题，最好一个页面只使用一次。效果如下：

  一级标题

  二级标题

  三级标题

  四级标题

  五级标题

  六级标题

• p：段落标签

  <p>这是一个段落</p>

  这是一个段落

• br：换行标签

  <span>这是一段内容</span><br/><span>这是另一段内容，通过br进行了换行</span>
  这是一段内容
  这是另一段内容，通过br进行了换行

• hr：水平线

  下面是一条水平线

  ---

• b、i、u、s、strong、em、ins、del

  功能/意义	视觉标签	语义化标签
  加粗	b	strong
  倾斜	i	em
  下划线	u	ins
  删除线	s	del

• ul、li：无序列表

  • 这是无序列表第1段内容
  • 这是无序列表第2段内容
  • 这是无序列表第3段内容

• ol、li：有序列表

  1. 这是有序列表第1段内容
  2. 这是有序列表第2段内容
  3. 这是有序列表第3段内容

• dl、dt、dd：自定义列表

  这是自定义列表第1-1段内容

  这是自定义列表第1-2段内容

  这是自定义列表第1-3段内容

  这是自定义列表第2-1段内容

  这是自定义列表第2-2段内容

  这是自定义列表第2-3段内容

• img：图片标签

  此处引入一张图片
  <img src="https://csdnimg.cn/feed/20180627/c32455a85d4ca16df211e812e67ab432.jpg" alt="图片未加载出来时的说明" title="鼠标悬停在图片时出现的文字"/>
  
  说明：该标签常用有三个属性

  • src ： 图片地址
  • alt ：图片未加载出来时的说明
  • title ：鼠标悬停在图片时出现的文字

• a：锚链接

  作用：实现地址跳转
  示例：https://github.com/Marco-hui
  属性：

  • href：超链接跳转的路径
  • target：规定跳转方式， _self(默认值，当前窗口打开)，_blank（新窗口打开）

• table：表格
  tr ：行   td：列（单元格）

<table border="1" cellspacing="0" cellpadding="0" width="200" height="100" bgcolor="#f60">
        <tr>
            <td colspan="2">1-1</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
        <tr>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>

上面代码效果如下：

1-1		1-3
2-1	2-2	2-3
	3-2	3-3

其中，对里面涉及的属性进行说明：
- border：给表格加边框
- cellspacing：单元格与单元格之间的间距
- cellpadding：单元格的内填充，内容与边框之间的间距
- width：给表格定宽度
- height：给表格定高度
- bgcolor：表格背景颜色
- colspan：合并单元格的列，加在td上
- rowspan：合并单元格的行加在td上

• form：表单

  作用：向服务器传输数据，收集用户信息
  属性：
  - action：表单提交到的后台地址
  - method：提交的方式，get和post
  - name：给表单起名字

• input：表单控件

  属性：

  • type：表单类型
    – 属性值：
    text（文本框）
    password（密码框）
    radio（单选框）
    checkbox（多选框）
    reset（重置按钮）
    submit（提交按钮）
    button（普通按钮）
  • value：表单框里的内容
  • name：给表单命名
  • checked：设定默认选中项

• select：下拉列表
  option：选项

  <select name="sel">
      <option value="1" selected>1</option>
      <option value="2">2</option>
  </select>

  value：选项值
  selected：默认选中项

• textarea：文本域

  <textarea name="area" cols="30" rows="10"></textarea>
  cols：列数
  rows：行数

• div：块级元素的代表

• span：行内元素的代表

---

以上为HTML常用标签，由于文章主要是笔记形式，所以没有详细讲解其用法、作用及其属性、属性值。有需要的童鞋可另行查询资料！