提示:由于水平有限,如发现有疑问或错误的地方请毫不客气的提出、讨论,我会在第一时间回复,感谢在先
单标签 <自闭标签>
换行(上下不会生成空白行)
水平线
<img src="" alt="" height="" width="" title="">
src: 图片来源
alt: 图片不显示时候交互文字
width、height,只设置一个能够保持不失真
title:获取焦点时候显示的文字,鼠标放在图片上的时候显示的内容;
图片没有设置宽高的时候,图片按照百分之分白显示;如果更改高或者宽,那么图片等比例缩放;
实体 特殊符号
HTML 对空格,回车,TAB不感冒;书写多个也只会显示一个;而且对于特殊字符是无法显示出来的比如 网页中显示 这个标签
< <;
> >;
©
注意最后的分号不要忘记
双标签
段落(段落上下自动生成空白行)
一个页面只能出现一次
文本标签
& (建议使用strong)
& 文字倾斜 (建议使用em)
& 删除线 (建议使用del)
& 下划线 (建议使用u)
语义化使用可读性更强!
锚点
<a href="http://www.baidu.com" title="touch me" target="_self">打开百度地址!
href :要打开的路径
title: 鼠标放到上面显示的内容
target:_self(默认值):在自身页面打开
_blank:在新的标签页中打开 blank:中文为空白的含义
一种超链接优化写法:
<base target="_blank"> 让所有的超链接都在新的标签页中打开.
设置锚点:eg <p id="maodian">
设置超链接到锚点: <a href="#maodian">点击我回到锚点
路径
利用绝对路径或者相对路径找到图片(一般情况下图片不会用绝对路径来做索引)
- html文档和图片在同一个目录中,使用图片的时候可以直接写图片名
- html文档和图片的父文件夹在同一个目录中,使用图片的时候可以写 文件夹名/图片名
- html文档和图片所在父文件夹的子文件夹在同一个目录中,使用图片的时候可以写 ../图片名
空链
: "有链接,但是不知道链接路径的时候使用空链" 回到网页顶部的操作
<a href="#faq">常见问题 导航到本页面id="faq"的地方
<a href="#botton-section">去底部 导航到本页面id="botton-section"的地方
<a href="#">回到页面顶部
/记住这种用法 跳转到其他界面的特定IDfaq/
<a href="http://abc.com/course/202#faq">常见问题
在移动设备上使用的时候可以打电话
<a href="tel:13663788334">打电话
列表
ul是一个组标签,一定是一坨一坨的出现,也就是说li标签不能单独存在,必须包裹在ul里面
由于ul和li是一个整体,所以ul里面不推荐包裹其它标签,永远记住ul里面最好只写li标签
虽然ul中推荐只能写li标签,但是li标签是一个容器标签,li标签中可以添加任意标签,甚至可以添加ul标签
无序列表
张三 list item; list item ; list item; list item;
- 李四
- 王五
<p>有序列表</p>
<!-- type: a,A,I,i start:列表开始的位置 -->
<ol type="I" start="3">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
<p>自定义列表</p>
<dl>
<dt>这是自定义列表</dt> define title
<dd>这是自定>义列表</dd> define description
<dd>这是自定>义列表</dd>
</dl>
自定义列表的展示形式:
first
1
2
3
second
4
5
6
dl也是一组标签,一般和dt dd 一起使用,一般dl里面除了 dt dd 不会包含其他的标签,一般的形式是 一个dt下面有多个dd
上标与小标标签
23 = 8; 2的3次方等于8
log28 = 3; 8的log等于3
h5快捷键
!tab html5代码块
meta && link 标签
meta 的属性有两种:name和http- equiv
name属性主要用于描述网页,对应于content(网页内容)
table
Table
<tr>
<td align="center">张</td>
<td align="center">18</td>
<td align="center">挖掘机</td>
<td align="center">1</td>
</tr>
<tr>
<td align="right">码流</td>
<td align="right">20</td>
<td align="right">大前段</td>
<td align="right">2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
<table align="center" width="300" height="200" bgcolor="red" cellspacing=1px>
<thead align="left" bgcolor="white">
<tr>
<th colspan="4"> header</th> <!-- 和并列 -->
</tr>
</thead>
<tbody bgcolor="white" align="center">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
thead,tbody,tfoot 是table的组成部分,架构;
th 主要是在thead中;起到强调,加粗的作用;其次如果 某一行或者列具有 总起,总领, 说明性,纲领性的文字,就可以使用th
th 和 td 相同 一般也是写在tr 中
</code></pre>
注释
下拉列表
下拉列表
省:
<br>
<br>
省份:<select name="省份:" id="" multiple>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
<option value="湖南省">湖南省</option>
</select>
市:<select name="市区" id="">
<option value="开封市">开封市</option>
<option value="兰考市">兰考市</option>
<option value="周口市">周口市</option>
option
</select>
县:<select name="县" id="">
<!-- 分组功能 -->
<optgroup label="开封市">
<option value="尉氏县">尉氏县</option>
<!-- 设置默认选中 -->
<option value="杞县" selected="">杞县</option>
<option value="通许县县">通许县</option>
</optgroup>
<optgroup label="海河市">
<option value="宴岗村">宴岗村</option>
<option value="通州村">通州村</option>
<option value="海河村">海河村</option>
</optgroup>
</select>
form内容重新设置
input type