8.4 H5知识点总结

时间:2022-12-30 09:52:09

HTML简介

HyperText Markup Language 简称为HTML
HyperText: 超文本 (文本 + 图片 + 视频 + 音频 + 链接)
Markup Language: 标记语言
由SGML(标准通用标记语言)发展而来
写给浏览器的语言

HTML的基本结构

<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    欢迎来到HTML世界
  </body>
</html>

HTML标签元素

HTML元素由开始标签和结束标签组成。
位于开始标签和结束标签中的文本是元素的内容。
HTML 标签有开始必须有结束。如果是没有内容的标签(空标签),用 />来结束。
标签名推荐用小写。
标签具有属性, 属性用来表示标签的性质和特征。属性要在开始标签中指定。

定义一个合格的HTML页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body> </body>
</html>

HTML常用元素

换行符  <br/>

段落  <p></p>

标题

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

文本格式化

<b>定义粗体文本</b>

<i> 定义斜体文本 </i>

<del>定义删除文本</del>

<sup>定义上标字</sup>

<sub>定义下标字</sub>

链接

<a href=“URL”>  </a>

锚点

锚点标签用于使用户"跳"到文档的某个部分。

<a href="#位置名">  </a>

<a name="位置名">  </a>

图像

<img src="URL" width="" height=""/>

图片相对地址的定义

同一目录

<img src=".jpg" />

下一层目录

<img src="data:images/.jpg"/>

上一层目录

<img src="../.jpg"/>

同一层不同目录

<img src="../images/.jpg"/>

图像热区

<img src="URL"  usemap="# map 名称" />

  <map name="map 名称">

  <area shape="形状" coords="坐标值" href="URL" />

</map>

HTML实体字符

实体字符 字符实体
大于号(>) &gt;
小于号(<) &lt;
引号(“) &quot;
注册商标(®) &reg;
版权(©) &copy;
&号 &smp;

无序列表

<ul>

<li>……</li>

<li>……</li>

<li>……</li>

</ul>

有序列表

<ol>

<li>……</li>

<li>……</li>

<li>……</li>

</ol>

HTML表格

<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<iframe>内嵌框架

<iframe src="url" name="框架名"></iframe>

form(表单)

<form name="form1" action="URL" method="get">
  用户名:<input type="text" name="">
  密 码:<input type="password" name="passwd">
</form>
文本框

<input type="text" name="username" value="">

密码框

<input type="password"name="passwd">

单选按钮

<input type="radio"name="sex"value="1"checked="checked">男

<input type="radio"name="sex"value="0">女

checked是指默认选项,不需要可以不设置

复选框

<input type="checkbox"name="" value="">

<input type="checkbox"name="" value="">

<input type="checkbox"name="" value="">

按钮

<input type="submit" name="" value="提交">

<input type="reset" name="" value="重置">

按钮还可以用图片设置,使视觉性更好一点

<input type="image"name="" src="图片地址链接">

隐藏域

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
</form>

textarea(表单元素:多行文本域)

<textarea rows="5" cols="50"></textarea>

select(表单元素:下拉框)

<label for="province">省份</label>
<select id="province">
<option>请选择</option>
<option selected>广东</option>
<option>上海</option>
</select>

optgroup(表单元素:下拉框分组)

<select>
  <optgroup label="热门城市">
    <option>广州</option>
    <option>深圳</option>
    <option>上海</option>
  </optgroup>
  <optgroup label="其他城市">
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
  </optgroup>
</select>