1、HTML介绍
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。
2、HTML标题
- HTML 标题是通过
<h1>-<h6>
标签来定义的,一般最多用到3-4级标题。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
3、HTML段落
HTML is a very good language
- 可以将这行文字封装成一个段落元素使其在单独一行呈现
<p>HTML is a very good language</p>
通过开始标签、结束标签、内容组成为一个完整的元素。
4、嵌套元素
元素除了单独使用也可进行嵌套。
<!--通过strong元素强调HTML-->
<p><strong>HTML</strong> is a very good language</p>
5、图像
src为图片所在地址,alt为图片的描述。
<img src="./test.png" alt="test image" />
6、链接
href为链接地址,a标签之间为显示内容。
<a href="www.baidu.com">百度</a>
7、常见属性
属性名 | 元素 | 描述 |
---|---|---|
action | form | 处理通过表单提交的信息的程序的 URI。 |
allow | iframe | 指定 iframe 的特性策略。 |
alt | area 、img 、input | 在图片无法显示时展示的替代文本。 |
autofocus | button 、input 、select 、textarea | 页面加载后,该元素应自动获得焦点。 |
autocomplete | button 、input 、select 、textarea | 指示浏览器是否可以自动填充表单中的值。 |
autoplay | audio 、video | 音视频应该自动播放。 |
background | body 、table 、td 、th | 指定图像文件的 URL。**备注:**虽然浏览器和电子邮件客户端可能仍然支持此属性,但它已经过时。请使用 CSS background-image 代替。 |
color | font 、hr | 该属性为文本设置颜色,可以使用具名颜色或十六进制 #RRGGBB 格式的颜色。**备注:**这是遗留属性。请使用 CSS color 属性代替。 |
datetime | del 、ins 、time | 指示与元素关联的日期和时间。 |
download | a 、area | 指示用于下载资源的超链接。 |
for | label 、output | 描述与当前元素绑定的元素。 |
form | button 、fieldset 、input 、label 、meter 、object 、output 、progress 、select 、textarea | 指示该元素所属的表单。 |
height | canvas 、embed 、iframe 、img 、input 、object 、video | 指定此处列出的元素的高度。对于其他所有元素,请使用 CSS height 属性。**备注:**对于某些实例,例如 div ,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。 |
high | meter | 指示高值区间的下限值。 |
href | a 、area 、base 、link | 关联资源的 URL。 |
id | 全局属性 | 通常与 CSS 一起使用,以为特定元素添加样式。此属性的值必须是唯一的。 |
label | optgroup 、option 、track | 为元素指定用户可读的标题。 |
lang | 全局属性 | 定义元素中使用的语言。 |
list | input | 指示建议用户输入的预定义选项列表。 |
low | meter | 指示低值区间的上限值。 |
media | a 、area 、link 、source 、style | 指定链接资源所设计的媒体的提示。 |
name | button 、from 、fieldset 、iframe 、input 、object 、output 、select 、textarea 、map 、mata 、param | 元素的名称。例如,用于服务器标识表单提交中的字段。 |
open | details 、dialog | 指示内容目前是否可见(若用于 <details> 元素)或对话框是否处于活动状态且可以与之交互(若用于 <dialog> 元素)。 |
preload | audio 、video | 指示是否应预加载整个资源、部分资源或者不预加载。 |
referrerpolicy | a 、area 、iframe 、img 、link 、script | 指定在获取资源时发送哪个引荐来源(referrer)。 |
rowspan | td 、th | 定义表格单元格应跨越的行数。 |
shape | a 、area | |
sizes | link 、img 、source | |
span | col 、colgroup | |
src | audio 、embed 、iframe 、img 、input 、script 、source 、track 、video | 可嵌入内容的 URL。 |
style | 全局属性 | 定义将覆盖先前设置的 CSS 样式。 |
target | a 、area 、base 、form | 指定打开链接文档的位置(若用于 <a> 元素)或显示接收到的响应的位置(若用于 <form> 元素)。 |
title | 全局属性 | 在鼠标悬停在元素上时显示的提示文本。 |
translate | 全局属性 | 指定当页面本地化时,元素的属性值和其文本节点后代的值是否应该被翻译,或者是否应该保持不变。 |
type | button 、input 、embed 、object 、ol 、script 、source 、style 、menu 、link | 定义元素的类型。 |
value | button 、data 、input 、li 、meter 、option 、progress 、param | 定义页面加载时元素中显示的默认值。 |
width | canvas 、embed 、iframe 、img 、input 、object 、video | 确定此处所列元素的宽度。**备注:**对于其他所有实例,例如 div ,这是一个遗留属性,对于这些实例应使用 CSS height 属性代替。 |
wrap | textarea | 指示文本是否应该换行。 |
8、字体样式
<h1 style="font-family: KaiTi">这是一个标题</h1>
-
通用:宋体 SimSun
-
黑体 SimHei
-
微软雅黑 Microsoft YaHei
-
微软正黑体 Microsoft JhengHei
-
新宋体 NSimSun
-
新细明体 PMingLiU
-
细明体 MingLiU
-
标楷体 DFKai-SB
-
仿宋 FangSong
-
楷体 KaiTi
-
仿宋_GB2312 FangSong_GB2312
-
楷体_GB2312 KaiTi_GB2312
9、表格
9.1 无表头表格
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
9.2 有表头表格
<table>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>33</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>44</td>
</tr>
</table>
10、列表
10.1 无序列表
无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个
ul
元素包围。
<p>
At Mozilla, we're a global community of technologists, thinkers, and builders
working together…
</p>
可以改为:
<p>At Mozilla, we're a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together…</p>
10.2 有序列表
有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个
ol
元素包围。
<p>
五禽戏的动作顺序与五行相关,按照国家体育总局新编套路的顺序依次是虎、鹿、熊、猿、鸟。五禽戏是中国传统导引养生的一个重要功法,其创编者华佗。
</p>
可以改为:
<p>五禽戏的动作顺序与五行相关,按照国家体育总局新编套路的顺序依次是</p>
<ol>
<li>虎</li>
<li>鹿</li>
<li>熊</li>
<li>猿</li>
<li>鸟</li>
</ol>
<p>五禽戏是中国传统导引养生的一个重要功法,其创编者华佗。</p>
11、HTML表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>