HTML小结

HTML相关的概念

什么是HTML？

是一个超文本标记语言，不是编程语言，要有流程控制

HTML和CSS 是通过我们浏览器内核的 渲染引擎来渲染到页面的

HTML的本质其实是什么？

就是由标签组成

标签的分类

• 单标签

  <br />
  

• 双标签

  <div>包裹一些内容，可以是文字，可以是标签</div>
  

标签的关系

• 嵌套关系 -- 父子关系

  <div>
    <span></span>
  </div>
  此时这个span标签就是div的孩子
  

• 并列关系 -- 兄弟关系

  <div></div>
  <span></span>
  

HTML常见的标签

骨架标签

排版标签

• h1 ~ h6 标题标签

  <h1>我是大标题</h1>
  ...
  <h6>我是小标题</h6>
  从h1 到 h6  字体是从大到小
  权重是从大到小
  

• p 标签 段落标签

  <p>我是一个段落</p>
  上下都有一些小间隙
  

• br 换行标签

  <br />
  

• div 和 span 盒子

  <div></div>
  <span></span>
  

  注意点：

  • div独自占据一行，span的话是一行可以显示多个
  • 这两个盒子 都不具备语义

• hr 水平线标签

  <hr />
  

文本格式化标签

• 加粗

  <b></b>
  <strong></strong> strong更加有语义
  

• 倾斜

  <i></i>
  <em></em>  em更加有语义
  

• 下划线标签

  <u></u>
  <ins></ins>  ins更加有语义
  

• 删除线

  <s></s>
  <del></del>  del更加有语义
  

图片标签

<img src="图片的地址" alt="" title="">

alt：图片无法正常显示的时候，所替代的提示文本

title：当鼠标悬停在图片上显示的提示文本

链接标签

<a href="要跳转的地址" target="跳转的方式" title=""></a>

target:跳转方式，_blank 新建一个窗口打开

表格标签 ★★

作用：专门用来显示数据

<table>
   <tr>
     <th>代表是表头</th>
   </tr>
   <tr>
     <td>表体</td>
   </tr>
</table>

table里面的属性

• border 边框
• width 宽度
• height 高度
• cellspacing 单元格之间的间距
• cellpadding 单元格与内容的间距
• align 表格的对齐方式
  • left 左对齐
  • center 居中
  • right 右对齐
• bgcolor 背景颜色

table的标题标签

<table> 
 <caption>表格的标题</caption>
 ...
</table>

合并单元格

• 先确定是跨行rowspan还是跨列 colspan
• 找到要合并的目标单元格，从上至下，从左至右
• 删除多余的单元格
  • 跨行，找对下面对应行数里面对应的单元格
  • 跨列，找本行目标单元格后面的对应的单元格

列表

有序列表

<ol>
  <li></li>
</ol>

有序列号，不多

无序列表

<ul>
  <li></li>
</ul>

重要，用得很多

自定义列表

<dl>
   <dt></dt>
   <dd></dd>
</dl>

次重要，用得还行，一般用于网站最下面的 技术支持

表单

input表单元素

• 属性

  type：设置表单的类型

  name：用于分组，后续用户后台的交互，如果触发form表单的提交的话，没有携带name属性的元素是不会提交内容的

  value ：这是默认值

  checked： 单元和复选框的默认选中项

• type里面的值

  • text 文本输入框
  • password 密码框
  • submit 提交按钮i，要配合form表单域
  • reset 重置按钮，要配合form表单域
  • button 普通按钮 不会触发form的提交
  • image 图片按钮 会触发form表单的提交
  • file 文本域 用于文件上传
  • radio 单选框 要配合name属性
  • checkbox 复选框 要配合name属性

form表单域

<form action="" method="" >
    ...
</form>

action：定义要提交的路径

methd：提交的方式，get/post

select ★★

<select>
    <option></option>
</select>

默认选中，要设置的属性是在option上面设置 selected

label ★★

提高用户体验，用户点击相应的文字的时候，会跳到相应的文本框

• 直接包裹

  <label>
     用户名: <input type="text">
  </label>
  
  

• 用 for id的方式

  <label  for="btn">用户名</label>
  <input type="text" id="btn">
  
  

textarea ★★

文本域；文本域可以显示多行，而文本框只能显示一行

base ★★

统一a标签的跳转方式

pre ★★

把包裹在里面的内容原封不动的显示到页面

锚点定位 ★★

用于当前页面跳转到指定位置的

1.给目标元素设置id属性

2.在a标签的href属性里面填写 #id名

特殊字符 ★★

以 & 符号开头 以 : 符号结尾

空格    
<      &lt;
>      &gt;