文章目录
0x0000 常用文本标签
只使用 html5 还保留的标签
标签 | 作用 |
---|---|
p | 段落 |
pre | 带格式段落 |
h数字 | 标题, 共七级 |
<hr/> | 分割线, 注意要标准加上/ |
<br/> | 换行, 注意要标准加上/ |
b | 粗体 |
big | 大号 |
em | 加重 |
i | 斜体 |
small | 小号 |
sub | 下标 |
sup | 上标 |
ins | 下划线 |
del | 删除字 |
效果如下,
定义粗体文本。
定义加重语气。
定义小号字。
定义大号字。
定义斜体字。
定义着重文字
定义下标字。
定义上标字。
定义插入字。
定义删除字。
0x0001 <a> 超链接
属性 | 取值 | 作用 |
---|---|---|
name | - | 名字 |
href | url / #另一个超链接名字 | |
target | _self, _blank, _top, 框架名 |
超链接里 可以包含图片, 使得图片也有超连接功能.
css修饰超链接实例 https://www.runoob.com/css/css-link.html
0x0010 <img> 图片
属性 | 取值 | 作用 |
---|---|---|
align | top, bottom, middle, left ,right | 图片位置 |
border | px | 定义图像周围的边框。 |
hspace | px | 图像水平空白 |
vspace | px | 图像垂直空白 |
以上属性不推荐, 建议使用样式表 | 以上属性不推荐, 建议使用样式表 | 以上属性不推荐, 建议使用样式表 |
- | - | - |
alt | - | 代替图片的文字 |
src | url | 图片的url |
width | % / px | 图像宽度 |
height | % / px | 图像高度 |
css修饰图片实例 https://www.runoob.com/css3/css3-images.html
0x0011 音频相关多媒体标签
音乐播放
属性 | 取值 | 作用 |
---|---|---|
src | url | 位置 |
autoplay | - | 自动播放 |
controls | - | 显示控制按钮 |
loop | - | 循环播放 |
muted | - | 静音 |
preload | auto, metadata, none | 控制加载视频 |
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
视频播放最佳解决方案
HTML5 + <object> + <embed>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
0x0100 <table> 表格
有关样式还是尽量用样式表吧, 这些属性不看也罢!
table属性 | 取值 | 作用 |
---|---|---|
align(不赞成) | left, center, right | 整个表格对齐方式 |
bgcolor(不赞成) | - | 背景颜色 |
background(不赞成) | url | 背景图片 |
cellpadding | % / px | 单元格边与内容 空白 |
cellspacing | % / px | 单元格之间 空白 |
frame | void above below hsides lhs rhs vsides box border | 外侧边框哪个课件 |
rules | none groups rows cols all | 内侧边框哪个可见 |
border | px | 表格边框宽度 |
width | % / px | 表格宽度 |
- | - | - |
rowspan | 数字 | 占几行 |
colspan | 数字 | 占几列 |
表格相关标签 | 描述 |
---|---|
caption | 标题 |
tr | 行 |
th | 表头单元格 |
td | 普通单元格 |
thead | 页眉 |
tbody | 主题 |
tfoot | 页脚 |
colgroup | 列组, 统一施加属性 |
col | 列, span=数字, 表示覆盖列数 |
colgroup 和 col 示例
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
效果如下,
css修饰表格示例 https://www.runoob.com/css/css-table.html
0x0101 <list> 列表
注意ul的 type 属性 html5 已经弃用, 最好改用css!
相关标签 | 作用 |
---|---|
ol | 有序列表, type属性, 1, i, I, a, A |
ul | 无序列表, type属性: circle空心圆, disc空心圆, square实心方块 |
li | 列表项目 |
dl | 定义列表 |
dt | 定义列表的项目 |
dd | 定义列表的描述 |
css修饰列表实例 https://blog.csdn.net/cccBtrya/article/details/80398594
0x0110 <form> 以及输入框相关标签
0. <form>
属性 | 取值 | 作用 |
---|---|---|
name | - | 表单名字 |
action | url | 向何处发送请求 |
method | get / post | 发送请求 |
autocomplete | on / off | 记忆功能 |
novalidate | novalidate | 不对表单进行验证 |
1. <input>
input{ /* input样式美化 */
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 13px 14px;
width: 620px;
font-size: 14px;
font-weight: 700;
font-family: "Microsoft soft";
}
input:focus{ /* 聚焦发光 */
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
另一个版本的 … 先贴上 … 待总结 …
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
2. <textarea>
<textarea rows="5" cols="20">
This is a text textare...
This is a text textare...
This is a text textare...
This is a text textare...
This is a text textare...
</textarea>
3. <select>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>
4. <datalist>
<input type="text" name="testList" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
5. <select> 与 <datalist> 区别
dataList 的表现很像是一个select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么
select 标签创建了一个菜单。菜单里的选项通过option标签指定。一个select元素内部,必须包含一个option元素,
总的来说就是,它们都可以显示出一个下拉表单框,但是select标签只能在它提供的选项中选择,而datalist不仅可以让你选择,还可以让你自己输入其它的选项。
6. <fieldset>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
0x0111 <link> 连接标签
网页图标
<link rel="shortcut icon" type="image/x-icon" href="images/panda_test.ico" />
外联式css文件
<link rel="stylesheet" type="text/css" href="mystyle.css" />
0x1000 <marquee> 跑马灯标签
属性 | 作用 | 取值 |
---|---|---|
direction | 方向 | up, right, down, left |
behavior | 效果 | scrol(默认循环滚动), slide(只滚动一次), alternate(来回交替滚动) |
scrollamount | 速度 | 像素值 |
scrolldelay | 间隔 | 每次滚动间隔 |
loop | 循环 | 默认为1 |
<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"
onmouseover="this.stop()" onmouseout="this.start()">
<p>content...</p>
</marquee>
0x1001 <details> 折叠框
点击则会展开内容
目前只有 chrome 和 safari 支持
summary是标题, 类似于表格的 caption
<details>
<summary>Click and open</summary>
<p>This is content...</p>
</details>
0x1010 <iframe> 新框架
frameset的替代品, 更加强大
在主文档里显示多个子文档
属性 | 值 | 描述 |
---|---|---|
src | url | 资源 |
srcdoc | 代码 | 框架中使用的代码 |
name | - | 框架名 |
scrolling | yes, no,auto | 是否显示滚动条 |
frameborder | 1, 0 | 是否显示框架边框 |
seamless | seamless | 框架上去像是包含文档的一部分 |
width | - | |
height | - |