a标签可以实现文字/图片的超链接

例如这个

跳转到百度

在浏览器中打开就会有这样一个页面

点击就会跳转到百度

也可以跳转到自己写的页面

跳转到htm01页面

也可以不做操作

在当前页面

这样点击之后你就会发现什么都没有发生

图片跳转到页面

target属性

_self    _blank

左边的是在当前页面重新打开这个新页面

_blank是新建一个标签页来打开链接

 表格属性

假设我想在浏览器展示一个这样的表格就可以使用表格标签

 行

列

我们可以使用快捷键tr>td*3快速创建一个3列的行

然后只需要cv几次即可完成表中内容

但是展示的页面可能不尽人意

我们需要将单元格中的距离调整一下

这里通过一个属性调整即可

cellspacing="0" 这样距离就调整成0了

如果想调整文字距离边框的距离可以使用这个属性cellpadding修改即可

align="center"  表示整个表格居中

里面包th  

th表示表头单元格,会居中加粗

合并单元格

可以使用这两个属性

合并行用rowspan="2"   合并两个横向单元格

合并列使用colspan="2" 合并两个纵向单元格

无需记忆调试即可

列表

无序列表(最常用的)

• 快捷键 ul>li*4  生成4个

  1. <h1>这是无序列表h1>
  2. <ul type="square">
  3. <li>内容1li>
  4. <li>内容2li>
  5. <li>内容3li>
  6. <li>内容4li>
  7. ul>

  

  这里的type表示的就是小圆点的形状

  有方形,空心圆和实心圆

  disc  实心圆

  square  方块

  circle  空心圆

  有序列表

  有序列表 ol  li (用得不多)

  通过type属性可以控制序号是怎么展示的 

  罗马数字还是阿拉伯数字啥的

  想加上一个偏移量就加上一个start="2"类似的就可以

  1. <h1>这是有序列表h1>
  2. <ol>
  3. <li>这是有序列表1li>
  4. <li>这是有序列表2li>
  5. <li>这是有序列表3li>
  6. <li>这是有序列表4li>
  7. ol>

  

  自定义列表(不常用)

  dl>dt>dd

  dt是自定义列表标题

  1. <h1>这是自定义的列表h1>
  2. <dl>
  3. <dt>自定义列表显示内容
  4. <dd>这是自定义列表内容1dd>
  5. <dd>这是自定义列表内容2dd>
  6. <dd>这是自定义列表内容3dd>
  7. dt>
  8. dl>

  

表单标签

常用语我们在网站中登录账号什么的

也就是客户端与服务器的交互功能

最常用的就是form表单

常用的就是input标签

可以通过对type进行对应的取值来控制input的类型

密码框

1. <form action="https://www.baidu.com/">
2. 姓名 <input type="text">
3. <br>
4. 密码 <input type="password">
5. <br>
6. form>

单选框

复选框

1. 爱好
2. <input type="checkbox"> 吃饭
3. <input type="checkbox"> 睡觉
4. <input type="checkbox"> 玩游戏
5. <br>

普通按钮

<input type="button" value="这是一个普通按钮" onclick="alert('hello')">

点击的动作就是:点击出现hello弹窗 按钮上的内容就是value

提交和清空按钮

1. <form action="">
2. 课程:<input type="text" name="course">
3. <input type="submit">
4. <input type="reset">
5. <input type="file">
6. form>

这里的提交就是向action中的网址提交内容

reset就是清空文本框的内容

file就是可以上传文件

label标签

作用就是将选择标签的文字和按钮绑定,选中文字单击获得和按钮一样的效果

这里就是将男女文字和按钮绑定

这里点击男或者点击按钮会获得相同的结果

下拉框

下拉框则是使用select标签来完成的

1. <select name="" id="">
2. <option value="">请选择option>
3. <option value="" selected="selected">1option>
4. <option value="">3option>
5. <option value="">6option>
7. select>

selected=selected表示默认值选中1

textarea表示输入文本框

<textarea name="" id="" cols="30" rows="10">textarea>

无语义标签

分为div和span   

表现形式上就是一个小盒子

div占一行

span不独占一行  

div中可以嵌套span和div标签

1. <div>
2. <div>
3. <span>吃饭span>
4. <span>睡觉span>
5. <span>玩游戏span>
6. <span>运动span>
7. div>
8. <div>
9. 吃饭
10. div>
11. <div>
12. 睡觉
13. div>
14. <div>
15. 玩游戏
16. div>
17. <div>
18. 运动
19. div>
20. div>