HTML 基础学习笔记

发表于 分类于 阅读次数：
本文字数： 5.3k 阅读时长 ≈ 5 分钟

Html

HTML(Hypertext Markup Language)，即超文本标记语言。

Html的特点

  • Html不需要编译，直接由浏览器执行
  • Html文件是一个文本文件
  • Html文件必须使用html和htm为文件名后缀
  • Html大小写不敏感（Ex：HTML与html一样）

1. Html基础

<标签名 属性名1="属性值" 属性名2="属性值" ...>...</标签名>

<!DOCTYPE>声明必须放在HTML文档的第一行

<!DOCTYPE>声明不是HTML标签

<!DOCTYPE>用于声明文档类型，告知Web浏览器页面是使用哪个HTML版本进行编写的。

如果没有<!DOCTYPE>文档类型声明，各浏览器按照自己的方式解析文档。

Html基本结构

Html标签

  1. 标题标签：<h1></h1>~<h6></h6>

  2. 段落标签：<p></p>

  3. 预格式化标签：<pre></pre>标签会保留在文本编辑器中输入的文本格式

  4. 修饰标签

    • 文字斜体：<i></i>,<em></em>
    • 加粗：<b></b>,<strong></strong>
    • 下标：<sub></sub>
    • 上标：<sup></sup>
    • 下划线：<u></u>

  5. 换行标记：<br>

  6. 列表标签

    • 无序列表：<ul><li>列表项</li>列表项<li></li>...</ul>

      type属性：

      值 描述
      disc 圆点
      square 正方形
      circle 空心圆

    • 有序列表：<ol><li>列表项</li>列表项<li></li>...</ol>

      type属性：

      值 描述
      1 数字1,2…
      a 小写字符a,b…
      A 大写字符A,B…
      i 小写罗马数字i,ii…
      I 大写罗马数字I,II…

    • 定义列表：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <dl>
          <dt>定义列表项</dt>
          <dd>列表项描述</dd>
          <dd>列表项描述</dd>
          <dt>定义列表项</dt>
          <dd>列表项描述</dd>
          <dd>列表项描述</dd>
          ...
      </dl>

  7. 图像标签：<img src="" alt="" ...>

    属性 值 描述
    src URL 显示图像的URL
    文字 鼠标悬浮时出现的提示文字
    alt 文字 图像替代文本
    height 数值和百分比 图像的高度
    width 数值和百分比 图像的宽度

    注：当由于：网速太慢、src属性中的错误、浏览器禁用图片，用户无法或查看图像时，alt属性可以代替图像显示在浏览器中内容。

    Tip: 图片加载失败，定义了title属性的话，鼠标悬浮也会有提示问题

  8. 超链接标签：<a href="">内容</a>

    属性 描述
    href 链接地址（内部链接或外部链接）
    target 链接的目标窗口(_self、_blank、_top、_parent)
    title 链接提示文字
    name 链接命名

    注：_self:当前window；_blank:新的window

    锚链接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- 同一页面 -->
    <a href="#锚名1">目录</a>
    <a href="#锚名2">目录</a>
    <a href="..." name="锚名1">内容</a>
    	xxxxxxxx
    	xxxxxxxxxxxx
    <a href="..." name="锚名2">内容</a>
    	xxxxxxxx
    	xxxxxxxxxxxx

    <!-- 不同页面 -->
    网页1：<a href="网页名称#锚名">目录</a>
    网页2：<a href="..." name="锚名">内容</a>

    Summary：1.定义锚的位置和锚名；2.设置寻找锚的链接。

    Tip1：定义锚的位置和锚名时不一定要有内容，只是作为定位的锚点

    电子邮件链接****

    1
    2
    3
    <a href="mailto:邮件地址">...</a>

    <a href="C:\Users\MSI1\Downloads\Useful File\UI\bootstrap-3.3.7-dist.zip">下载bootstrap</a>

    Tip：下载文件，只需要讲文件的路径放入href中就行

  9. 特殊符号（常用）

    属性 显示结果 描述
    &lt; < 小于号或显示标记
    &gt; > 大于号或显示标记
    &reg; ® 已注册
    &copy; © 版权
    &trade; ™ 商标
    &nbsp; Space 不断行的空白

Html元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

Html属性

  1. align对齐属性

    值 描述
    left 左对齐内容
    right 右对齐内容
    center 居中对齐内容
    justify 对行进行伸展（这样每行都可以有相等的长度）

注释

<!-- 注释内容 -->

2. Html表格

表格标签

  1. 表格：<table></table>

    • table的属性
    Values
    • frame属性的可选值
    Values
    • rules属性的可选值
    Values

  2. 行：<tr></tr>

    • 行标签属性
    属性 值 描述
    align left,center,right,justify,char 行内容的水平对齐
    valign top,middle,bottom,baseline 行内容的垂直对齐
    bgcolor rgb(x,x,x),#xxxxxx,colorname 行的背景颜色

  1. 列：<td></td>

    • 跨列属性：colspan
    • 跨行属性：rowspan

  2. 表头：<th></th> 内容居中，加粗显示

  3. 表格标题：<caption>...</caption> 居中显示

表格结构标签

表格划分为三部分：表头、主体、脚注

  • <thead></thead>:表格的头（放标题之类内容）
  • <tbody></tbody>:表格的主题（放数据的主体）
  • <tfoot></tfoot>:表格的脚（放表格的脚注）
属性 值 描述
align left,center,right,justify,char 行内容的水平对齐
valign top,middle,bottom,baseline 行内容的垂直对齐
bgcolor rgb(x,x,x),#xxxxxx,colorname 行的背景颜色

表格的嵌套

1.嵌入的表格必须有完整的表格结构

2.嵌入的表格需要放到父表格的标签中

表格布局

注意：

1.尽量少的使用表格嵌套

2.尽量少的使用表格跨行跨列

原因：代码的维护成本会很高。

说明：使用表格进行网页结构布局一般不设置border属性

3. Html表单

表单标签

<form></form>

在form标签中，以下标签实现表单元素添加：

标签 描述
<input> 表单输入标签
<select> 菜单和列表标签
<option> 菜单和列表项目标签
<textarea> 文字域标签
<optgroup> 菜单和列表项目分组标签

<form></form>的属性

属性 值 描述
action url 提交表单时向何处发送表单数据
method get,post 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _blank,_self,_parent,_top 在何处打开action URL
ectype application/x-www-form-urlencoded
multipart/form-data
text/plain		 在发送表单数据之前如何对其进行编码

Tip：get和post

get：使用url传递参数，对所发送信息的数量也有限制，一般用于信息获取

post：表单数据作为http请求体的一部分，对所发送信息的数量无限制，一般用于修改服务器上的资源

<input>标签的属性

type属性 描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏域
image 图像域 
1
2
<!-- 图象域，可以起到提交按钮的作用 -->
<input type="image"  name="image_button" src="image/button1.jpg">

单行文本域的属性（text）

属性 描述
name 文本域的名称
maxlength 指定用户输入的最大长度
size 指定文本框的宽度，以字符个数为单位；文本框的缺省高度是20个字符
value 指定文本框的默认值
placeholder 对用户需要输入到文本框中的内容进行提示

多行文本域的属性（textarea）

属性 描述
name 设置文本区的名称
placeholder 设置描述文本区域预期值的简短提示
rows 设置文本区内的可见行数
cols 设置文本区内的可见列数

下拉菜单和列表

1
2
3
4
5
<select name="">
    <option value="">option</option>
    <option value="">option</option>
    ...
</select>

<select></select>标签的属性

属性 描述
name 设置下拉菜单和列表的名称
multiple 设置可选择多个项目
size 设置列表中可见选项的数目

Tip1:下拉菜单不能添加multiple和size属性，列表可以添加multiple和size属性。

<option></option>标签的属性

属性 描述
selected 设置选项初始选中状态
value 定义送往服务器的选项值

分组下拉菜单和列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- grammer -->
<select name="">
    <optgroup label="group1">
    	<option value="">option</option>
        <option value="">option</option>
        ...
    </optgroup>
    <optgroup label="group2">
    	<option value="">option</option>
        <option value="">option</option>
        ...
    </optgroup>
    ......
</select>

4. div和span标签

<div></div>

div标签是一个区块容器标签，<div></div>之间是一个容器，可以包含段落，表格，图片等各种Html元素。

<span></span>

span标签没有实际意义，为了应用样式

块级标签和行内标签

  • 块级标签：占据一行，换行
  • 行内标签：在一行，不换行

块级元素和行内元素

块元素

  1. 独占一行
  2. 可以设置宽高
  3. 如果不设置宽度，宽度默认为容器的100%
  4. div、p、h1-h6、ul、ol、li、dl、dt、dd…

行内元素

  1. 与其他元素同行显示
  2. 不可以设置宽、高
  3. 宽高就其元素内容（文字或图片）的宽高
  4. span、a、b、i、u、em…

Tip1：块级元素可包含行内元素和某些块级元素

Tip2：行内元素不能包含块元素，只能包含其他行内元素

Tip3：块级元素不能放在<p></p>标签内

Tip4：块级元素与块级元素并列，行内元素和行内元素并列

注：特殊块级元素只能包含行内元素，不能包含块级元素（Ex:h1~h6,p,dt）