根据Pink老师于bilibili发布的系列教学视频,进行学习;

目标:

最终熟练掌握HTML语言;
做出一个个人HTML系统,风格未定。

HTML简介

网页

  1. 网页是什么
    网页是构成网站的基本元素(网站是网页的集合) 。网页由图片、视频、文字、声音、等 元素 构成。

  2. HTML是什么?

HTML指的是超文本标记语言(Hyper Text Markup Language),是用来 描述网站 的语言。

浏览器

浏览器 内核 备注
IE Trident IE、猎豹、360极速、百度
Firefox Gecke 火狐
Safari Webkit 苹果
Chrome/Opera Blink 为Webkit分支

Web标准

Web标准由W3C(万维网联盟)和其他标准化组织指定的一系列标准的集合。

  1. 为什么需要Web标准?

浏览器不同,通过Web标准,得到统一展示内容。

  1. Web标准构成
标准 说明
结构 对于网页元素的整理与分类
表现 用于网页元素的版式、颜色及大小等外观样式
行为 网页模型的定义以及交互的编写

Web标准关系

Web标准关系2

HTML标签

HTML语法规范

  1. HTML基本语法

HTML标签由尖括号包括,且通常成双成对,例如:<html> </html>; 单标签极少,但也存在,例如</br>

  1. 标签关系
  • 包含关系,如下:
1
2
3
<head>
<title> </title>
</head>
  • 并列关系,如下:
    1
    2
    <head> </head>
    <body> </body>

HTML基本结构

  1. HTML文档
    1
    2
    3
    4
    5
    6
    <html>
    <head>
    <title> </title>
    </head>
    <body> </body>
    </html>

开发工具

哼,我觉得Atom也超好用。

HTML常用标签

标签语义

根据标签语义,在合适的地方使用合理的标签,可以使页面更加清晰。

标题标签

<h1> - <h6>,对标题文字加粗加大,且独占一行,用例:<h1> 我是一级标题 </h1>;

段落和换行

段落(paragraph)标签,如:<p> </P>;

换行(break)标签,如:<br/>;

文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
<strong> </strong> //加粗,推荐
<b> </b> //加粗

<em> </em> //倾斜,推荐
<i> </i> //倾斜

<del> </del> //删除线,推荐
<s> </s> //删除线

<ins> </ins> //下划线,推荐
<u> </u> //下划线

<div><span>

<div><span>没有语义,用作容器;

<div>标签用于布局,独占一行

<span>标签用于布局,但一行可以放置多个

图像

<img>为图像标签;

属性 属性值 说明
src 图片路径 必须
alt 文本 替换文本,图像不能显示的文字
title 文本 提示文本
width 像素 图像宽度
height 像素 图像高度
border 像素 设置图像边框粗细

超链接

<a herf=""></a>为超链接标签;

属性 作用
href 超链接
target 指定链接打开方式,_self为默认值,_blank为新窗口打开

空连接:#,使用为<a herf="#"> </a>

下载链接:如果href内部地址是一个文件或者压缩包,会下载此文件;

网页元素链接:为图片、文字、视频等元素添加超链接;使用示例如:<a href="#" target="_blank"> <img src="img" height="100"> </a>

锚点链接:点击定位到页面的某个位置;例如:目标;使用示例如下:

1
2
<a herf="#target"> </a>
<span id="target">目标!</span>

路径

目录文件夹与根目录

  • 目录文件夹 是普通文件夹,用以存放图片,HTML等网页素材;

  • 根目录 是打开目录文件夹后的第一层;

路径

  • 相对路径:已以用文件所在位置为参考基础,而建立出的目录路径;即图片相对于HTMl页面的位置,例如:<img src="../img/hcj.png" height="100">;

  • 绝对路径:目录下的绝对位置,直接到达目录位置,通常从盘符开始,或者完整的网路路径;

注释与特殊字符

  1. 注释
    格式为<!--注释-->;快捷键为Ctrl + /;

  2. 特殊字符

  • 空格: &nbsp;
  • >: &lt;
  • <: &gt;

表格标签

用于显示、展示数据;

基本语法

  1. <table> </table>,用于定于表格;

  2. <tr> </tr>(table row),定义表格中的行,必须嵌套在<table> </table>中使用;

  3. <td> </td>(table date),定义表格中的单元格,必须嵌套在<tr> </tr>中使用;

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<td>不做大哥好多年</td>
<td>其实我是逗你玩</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td>哈哈哈哈哈哈哈</td>
</tr>
</table>

表头单元格

<th> </th>为表头单元格;会加粗加大并居中文字;

表格属性

属性 描述
aligh left, center, right 对齐方式
border “1” or “” 边框是否使用或者宽度;
cellpadding 像素值 单元边与其内容之间的空白
width 像素值或百分比 表格的宽度

表格结构标签

thead为表头区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<thead>

<tbody>
<tr>
<td>文子</td>
<td>难</td>
<td>3岁半</td>
</tr>
</tbody>
</table>

合并单元格

  1. 跨行合并:rowspan="#",以最上层单元格为目标单元格;

  2. 跨列合并:colspan="#",以最左侧单元格为目标单元格;

  3. 删除多余单元格;

吓死个人
尝试跨行合并1排名 关键词趋势尝试跨列合并
尝试跨列合并21鬼吹灯345
1
2
3
4
5
6
7
8
<table align="center" width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="2">尝试跨行合并1</th><th>排名</th> <th>关键词</th><th>趋势</th><th colspan="2">尝试跨列合并</th>
</tr>
<tr>
<td>尝试跨列合并2</td><td>1</td><td>鬼吹灯</td>吓死个人<td>↑</td><td>345</td>
</tr>
</table>

列表标签

列表 用于布局;整齐且有序,使布局更自由方便;

多使用css改变样式;

无序列表

<ul> </ul>(Unordered List),内部只可嵌套<li></li>(lists); <li> </li>内部可容纳任何元素;

  • 无序列表1
  • 无序列表2
  • 无序列表3
1
2
3
4
5
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

有序列表

<ol></ol>(ordered list),内部只可嵌套<li></li>(lists); <li> </li>内部可容纳任何元素;

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3
1
2
3
4
5
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>

自定义列表

<dl> </dl>(description list),大佬带队列表; <dl> </dl>大佬标签内部,只能使用<dd> </dd>小弟标签;且可使用多个大佬和多个小弟;

大佬
小弟1
小弟2
小弟3
1
2
3
4
5
6
<dl>
<dt>大佬</dt>
<dd>小弟1</dd>
<dd>小弟2</dd>
<dd>小弟3</dd>
</dl>

表单标签

用于收集信息;分为表单域、表单控件和提示信息三个部分;

表单域

<form> 表单域是包含表单元素的区域,用以实现用户信息收集;此标签会将它范围内的表单元素信息提交给服务器;

属性 作用
action URL地址 接收和处理表单数据的服务器程序的URL地址
method get/post 设置表单数据的提交方式
name name 指定表单名称以作区分

表单控件

  1. input表单元素; nameand value应为每个每个元素必须的属性值;

范例如:

<label for="user_name">user_name:</label> <input type="text" name="user_name" id="user_name" value="输入用户名" maxlength="6" onfocus="this.value=''" >

  • type属性
属性值 描述
radio 相同name属性,进行单选
checkbox 复选框
buttom 按钮
file 文件上传
hidden
image
password
reset
submit 提交表单 域内信息
text
  • 更多
属性 属性值 描述
name input元素名称
value input元素值
checked checked 默认选中
maxlength 正整数 输入字段的最大长度
onfoces this.value’’ 获得焦点,自动清除
  • <label>标签

<label>标签为input元素标注;
语法为<legal for="id" </lable>,需要在对应input标签内部添加id值;

  1. <select>下拉表单元素

<select>为下拉列表标签;至少包含两个<option>标签;当<select>中定义selected="selected"时,此项目为默认选中项;

籍贯:

1
2
3
4
5
6
7
籍贯:
<select name="jiguan">
<option>火星</option>
<option>水星</option>
<option>金星</option>
<option selected="selected">蓝白星</option>
</select>
  1. <textarea>文本域元素

<textarea>用于定义多行文本输入;

待续