HTML杂记

HTML杂记

文本缩进

<p style="text-indent: 2em;">
   paragraph 
</p>

del and ins（语义）

<del>已删除文本</del>
<ins>更新后的（新增的）文本</ins>

address(语义)

<address>北京市东大街35号</address>

用strong而不用b

<strong>加粗，表强调的语义，b是物理性标签，没有语义</strong>

用em而不用i

<em>斜体，表强调的语义，i是物理标签，没有语义，现用来包裹图标</em>

division标签

<div>
    我是一个div
</div>

换行和空格会作为文本分隔符

<div style="width: 200px; background: yellowgreen; word-break: break-all">
    aksdhajh           djsah   
    jdasdhjashdhajkshdjakshdjkashdjahsdjhasjdhasjdh
    <!-- 浏览器总是会截短HTML页面中的多个空格为单个空格并把换行符转化为单个空格 -->
    <!-- 如需在页面中增加空格的数量，您需要使用 &nbsp; 字符实体。 -->
</div>

尖括号的写法

<div>space<div>space</div>  	   <!-- 这样写是错误的，浏览器会误认为它们是标签 -->
<div>space&lt;div&gt;space</div>   <!-- 正确写法 -->

HTML 中有用的字符实体

注释： 实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

img的alt属性

<img src="waizhang.jpg" alt="王毅外长" title="王毅外长">   <!-- 当图片解析失败时，会显示alt内的文字以提示用户这张图片的内容 --><!-- 当鼠标悬停在图片上时，会显示title内的文字以提示用户这张图片的标题 -->

HTML元素

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

内联元素 inline element

不独占一行，无法定义宽高

常见的内联元素

• strong
• span
• em
• del
• ins
• label
• a
• sub
• sup

<strong style="background: hotpink;">test</strong><strong style="background: hotpink;">test</strong>

块级元素 block element

独占一行，可以定义宽高

常见的块级元素

• p
• hx
• div
• address
• ul
• ol
• li
• dl
• dt
• dd
• table
• fieldset
• legend
• form

内联块级元素 inline-block element

不独占一行，可以定义宽高

常见的内联块级元素

• input
• img
• select
• textarea
• iframe

内联元素能嵌套内联元素

块级元素能嵌套任何元素

注意：p标签不能嵌套div，a标签不能嵌套a标签

HTML之注释

<!--我是注释-->

注释的作用：

1. 方便后期维护，提高代码的可用性
2. 检查bug

sup 和 sub

上标 superscripted

下标 subscripted

他们都是内联元素

<p>10<sup>5</sup></p> <p>H<sub>2</sub>O</p>

span

是一种内联元素，没有任何样式

需要将一段文本与其他文本进行区分的时候使用，如下

<p>我是一个非常非常<span style="color:hotpink">牛</span>    <span style="color:rebeccapurple">X</span>的WEB工程师</p>

ol, ul, dl

order list 有序列表

unorder list 无序列表

definition list 定义列表 dt (definition term), dd (definition description)

<ol type="A" start=10 reversed="reversed">    <li>JAVA</li>    <li>Python</li>    <li>Javascript</li>    <li>ASP</li>    <li>PHP</li></ol><ul type="square">    <li>JAVA</li>    <li>Python</li>    <li>Javascript</li>    <li>ASP</li>    <li>PHP</li></ul><dl>    <dt>    <dd>test1</dd>    <dd>test2</dd>    </dt></dl>

table

表格

caption 表格标题

tr table row

th table header

td table data

border 边框

cellpadding 单元格内边距

cellspacing 单元格间距

colspan 列合并

rowspan 行合并

thead 表格页眉

tfoot 表格页尾

tbody 表格内容主体

thead、tbody、tfoot必须同时出现，加载顺序 thead -> tfoot -> tbody

如果不用thead、tbody、tfoot三件套，浏览器会等待表格数据全部加载完毕才显示表格

<table border="1" cellpadding="10" cellspacing="10">    <caption>VIP班级学生联络表</caption>    <thead>        <tr>            <th>ID</th>            <th>姓名</th>            <th>电话号码</th>            <th>备注</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td>东东</td>            <td>13887652345</td>            <td>班长</td>        </tr>        <tr>            <td>2</td>            <td>西西</td>            <td>13882652345</td>            <td>纪律委员</td>        </tr>        <tr>            <td>信息</td>            <td>2018.3班</td>            <td colspan="2">13位学生</td>        </tr>        <tr>            <td>3</td>            <td>张三</td>            <td>13882622345</td>            <td rowspan="2">文娱委员</td>        </tr>        <tr>            <td>4</td>            <td>李四</td>            <td>13822652345</td>        </tr>    </tbody>    <tfoot>        <tr>            <td colspan="4" align="center">学生都要称为web开发工程师</td>        </tr>    </tfoot></table>

frame

框架 基本不用了

缺点：

1. 不能放在body内
2. 一次请求多个页面，影响加载性能
3. 爬虫程序无法识别内部网页
4. 页面与页面之间无法良好地交互

<frameset row="10%, 90%">    <frame />    <frameset col="20%, 80%">        <frame />        <frame src="https://jd.com" />    </frameset></frameset>

iframe

内联框架 内联块级元素

缺点：

1. 爬虫程序无法识别内部网页
2. 滚动条体系混乱

<a href="www.jd.com" target="jd">京东网</a><iframe height="200" name="jd" style="background: rebeccapurple;" src="http://www.jd.com" frameborder="0" scrolling="yes"></iframe>123

form

表单 块级元素

<form action="url" method="GET">    <p>        用户名：<input type="text" name="username" maxlength="5">    </p>    <p>        密码：<input type="password" name="password">    </p>    <input type="submit" value="登录"></form>

input

输入框 内联块级元素

<p>    用户名：<input type="text" name="username" maxlength="5"></p><p>    密码：<input type="password" name="password"></p><input type="submit" value="登录">

disabled 与 readonly

<form action="url" method="GET">    <input type="text" name="username1" value="123" readonly="readonly">    <input type="text" name="username2" value="1234" disabled="disabled">    <label for="password">密码</label>    <input type="password" id="password" name="password">    <input type="submit" value="登录"></form>

disabled的数据不能被提交，但readonly可以。点击登录后，提交数据如下，

http://127.0.0.1:5500/url?username1=123&password=

radio

单选需要设置几个radio的name为相同的值

<form action="url" method="GET">    <input type="radio" id="male" name="sex" value="male" checked="checked">    <label for="male">男士</label>    <input type="radio" id="female" name="sex" value="female">    <label for="female">女士</label>    <input type="submit"></form>

checkbox

<form action="url" method="GET">    <input type="checkbox" id="java" name="myFavoriteLan" value="java">    <label for="java">java</label>    <input type="checkbox" id="PHP" name="myFavoriteLan" value="PHP">    <label for="PHP">PHP</label>    <input type="checkbox" id="Python" name="myFavoriteLan" value="python">    <label for="Python">Python</label>    <input type="submit"></form>

label

内联元素

label的for属性与某一个input的id值相同时，点击label可以聚焦input输入框

<form action="url" method="GET">    <label for="username">用户名</label>    <input type="text" id="username" name="username" maxlength="5">></form>

select

<form action="url" method="GET">    <select name="guojia" id="">        <option value="">请选择</option>        <option>泰国</option>        <option>美国</option>    </select>    <input type="submit"></form>

textarea

cols的宽度公式， cols’s width = 8px(英文字符的宽度) * cols + 17px

<form action="url" method="GET">    <textarea name="" id="text" cols="30" rows="10" placeholder="请输入...">123<div></textarea>        <input type="submit"></form>

fieldset 和 legend

都是块级元素

<form action="url" method="GET">    <fieldset>        <legend>用户登录</legend>        <label for="username">用户名</label>        <input type="text" id="username" name="username" value="123">        <label for="password">密码</label>        <input type="password" id="password" name="password">    </fieldset>    <fieldset>        <legend>用户注册</legend>        <label for="username">用户名</label>        <input type="text" id="username" name="username" value="123">        <label for="password">密码</label>        <input type="password" id="password" name="password">        <label for="password1">确认密码</label>        <input type="password" id="password1" name="password1">    </fieldset>    <input type="submit" value="登录"></form>

MD5

消息摘要算法，又名不可逆加密算法

只要加密了，就不可以解密

不需要提供密钥

---