web前端 2 HTML

2020-04-11

HTML

html 超文本标记语言以标签的形式规定网页的总体结构
标签 由尖括号括起来如通常成对出现<br><code>元素</code> 由标签和内容组成元素=标签+内容

标签中有多个不同属性属性先后顺序没有关系

html文件结构最外层是html标签里面包含head标签和body标签
head标签 头部信息文字显示在浏览器的标签栏中
meta标签 网页元数据包括作者提供给搜索引擎的关键字等信息其中有个chartset属性它表示浏览器以哪种编码方式来解析源文件

网页打开乱码

原因是源文件保存时的编码和源文件中指定浏览器以哪种编码方式来解析源文件的编码不一致导致的
如 < meta charset=”UTF-8” > 浏览器就会也UTF-8解析源文件，但源文件保存是也ascii码保存就会出现浏览器打开乱码

标题 h1~h6

<h1>内容</h1>
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>

段落 p

默认把连续空格和换行转为单个空格，段内空格使用  换行使用<br /> 两个换行后再空一行
<p>内容</p>

1	<p>这是1-1段!    这是1<br /><br />-2段!</p>

段内换行 br

单独出现的标签
<br />

1 2	<p>这是1-1段! <br />这是1-2段!</p> <p>这是2段!</p>

预留格式 pre

pre之间的内容会保留源文件格式输出包括空格和换行
<pre>内容</pre>

<pre>这是1-1段!    这是1


-2段!
</pre>

行内组合 span

用于标记某些内容用于CSS样式格式化
<span>内容</span>

<style type="text/css">  #使用css规定span的颜色和字体
span{
    color:blue;
    font-weight:bold;
}
</style>
<p>这个是<span>test</span>!</p>

水平线 hr

单独出现的标签
<hr />

1
2
3

<p>这个是test1!</p>
<hr />
<p>这个是test2!</p>

注释

可以注释单行也可以多行


1
2
3

<!--单行-->
<!--多
    行-->

超链接 a

<a href="网址">文字或图片</a> 其中网址可以是本站点其他网页，也可以是外部站点（地址必须是协议部分https://），可以是虚拟地址用#表示

1
2
3

<a href="index.html">超链接1</a><br />
<a href="https://www.baidu.com/">超链接2</a><br />
<a href="#">超链接3</a>

插入图片 img

<img src="图片地址" alt="文字" /> alt属性用于在图片找不到时显示文字 src属性用相对路径单独出现的标签

1	<img src="images/logo.git" alt="图片出错显示的文字" />

区域 div

结合css排版布局和组合页面上元素 align元素设置对齐 certer表示居中 id设置区域唯一名字
<div></div>

<div id="name" align="center">
    <h1>title</h1>
    <p>html</p>
    <p>css</p>
    <p>js</p>
</div>

无序列表 ul 有序列表 ol 列表项 li

ul和ol标签里面要带有li标签

1
2
3

<ul>
    <li>内容</li>
</ul>

<ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>

1
2
3

<ol>
    <li>内容</li>
</ol>

<ol>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ol>

表格 table tr 行(table row) td 列(table data) th 表头(table head)

border="1" 表示边框的粗细

<table>
    <tr>
        <td>内容</td>
    </tr>
</table>

<table border="1">
    <th>    <td>学生数</td>    <td>平均数</td>    </th>
    <tr>    <th>一班</th>    <td>30</td>    <td>89</td>    </tr>
    <tr>    <th>二班</th>    <td>35</td>    <td>85</td>    </tr>
    <tr>    <th>三班</th>    <td>32</td>    <td>80</td>    </tr>
</table>

表单 form 一个采集用户信息的区域

action属性表示收集的数据由哪个页面处理
表单元素包括 文本框 按钮 单选 多选 下拉列表 文本域
其中文本框 按钮 单选 多选都是在input标签中只是type不同

1
2
3

<form action="数据处理页面">
    表单元素
</form>

文本框/密码框 input —text|password

type属性中text表示明文 password表示密码 name作用让后端知道是哪个表单的数据

<form>
    账户：<input type="text" name="user"/>
    <br />
    密码：<input type="password" name="password" />
</form>

提交按钮/重置按钮 input —submit|reset

value表示按钮文字内容

<form>
    <input type="submit" value="提交" name="submit" />
    <input type="reset" value="重置" name="reset" />
</form>

单选/多选 input — radio|checkbox

value表示提交到后端的数据 name表示当前项的名字单选时两个name名要一样 checked="checked"表示默认选上

<form>
    性别：
    男<input type="radio" value="boy" name="gender" checked="checked" />
    女<input type="radio" value="girl" name="gender" />
    <br />
    爱好：
    <input type="checkbox" value="1" name="music" checked="checked" />音乐
    <input type="checkbox" value="2" name="sport" />体育
    <input type="checkbox" value="3" name="reading" />阅读
</form>

下拉列表框 select 列表项option

selected="selected"表示默认选上

<form>
    爱好：
    <select>
        <option>旅游</option>
        <option selected="selected" >看书</option>
        <option>运动</option>
        <option>购物</option>
    </select>
</form>

文本域 textarea

rows指定行数 cols指定列数

<form>
    个人简介：
    <br />
    <textarea rows="10" cols="50" >这里可以输入内容...
    </textarea>
</form>

em i 斜体
strong b 加粗

dl 自定义列表 dt 列表项term dd 描述类似无序列表

<dl>
    <dt>html</dt>
    <dd>超文本标记语言</dd>
    <dt>css</dt>
    <dd>层叠样式表</dd>
</dl>