HTML总结
2018-11-19 本文已影响0人
夜阑w
HTML的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
一些常用的标签及属性
文本内容
- p标签表示段落：
<p>This is a paragragh</p> - h1~h6是一级到六级标题：
<h1>Header</h1> - hr是分割线：
<hr> - br是换行：
<br> - ol是有序列表，ul是无序列表，其中每一项用li标签表示。ol的type可以规定列表的类型(数字或字母等)，start属性可以规定列表中的起始点。ul的type属性可以设置修改文本前实心小圆点的样式或设置为没有。
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
- blockquote、cite、q为引用，其中blockquote标签会有段落缩进，cite标签引用的内容为斜体，q标签会在引用的内容外面加上引号。
- 加粗：strong, em, b, i
- sup和sub表示文本的上标和下标
- del和ins表示插入和删除
多媒体和嵌入式内容
- img标签表示图片，是一个单标签。属性主要有宽度width、宽度height以及src，src属性用于定义图片的资源地址，另外alt属性可以规定图像的替代文本。
<img width="500" height="250"
src="http://ww1.sinaimg.cn/large/006cGFXaly1fxa9kvqda7j30vy0rswl5.jpg">
- vedio标签表示视频，它也有以上的三个属性。除此之外，controls属性可以使用户控制视频的暂停、播放等。poster属性指向一个图像的URL，可以作为该视频的海报。
<video src="noe.mp4" controls poster="noe.jpg">
<p>Your browser doesn't support HTML5 video. Here is a <a href="noe.mp4">link to the video</a> instead.</p>
</video>
- andio标签表示音频，与vedio标签用法几乎相同，没有视觉显示部件。
<audio controls>
<source src="Yellow.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="Yellow.mp3">link to the audio</a> instead.</p>
</audio>
- iframe标签可以将其他的Web文档嵌入当前文档中，有src、width/height等属性，另外frameborder用于设置边框。
<iframe src="https://baidu.com" width="500" height="500" frameborder="1">
<p>
<a href="https://baidu.com">Fallback link for browsers that don't support iframes</a>
</p>
</iframe>
表格
- table标签定义表格，caption标签表示table的标题，thread标签为表格的页眉，tbody标签为表格的主体，tr标签为表格的一行，th为表格的表头，td为表格的单元格。
- 常用属性有:border用于设置边框的宽度，rowspan属性可以合并行，colspan属性可以合并列。
表单
- form标签表示表单，包含的标签有单行文本框input、多行文本框textarea、下拉选择select、按钮button等。
<input type="text" name="acount" placeholder="请输入想注册的帐号">
<textarea name="message" rows="10" cols="30">模型是对现实社会的反映</textarea>
<button type="submit">提交</button>
<select name="years">
<option value="one">1年</option>
<option value="two">2年</option>
</select><br>
- 单行文本框input有多种类型，type="text"为文本输入，type="password"为密码字段，type="radio"为单选按钮输入,type="checkbox"为复选框。另外还有number、color、data、datatime、email、month、search等多种输入类型。
<input type="password" name="password" placeholder="请设置您帐号的登入密码">
<input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女
<p>类图由以下哪三部分组成：</p>
<p><input type="checkbox" name="multiselect2" value="A" checked />(A)名称(name)</p>
<p><input type="checkbox" name="multiselect2" value="B" checked />(B)属性(Attribute)</p>
<p><input type="checkbox" name="multiselect2" value="C" checked />(C)操作(Operation)</p>
<p><input type="checkbox" name="multiselect2" value="D" />(D)方法(Function)</p>
- 常用的属性有：type表示类型，name表示表单的名称；value表示一个具体的表单项对应的值；placeholder表示输入框的占位符，输入框为空时显示；checked针对多选框/单选框，默认状态时选中状态。
block、inline、inline block
- block元素会占用一整行，且上下会有一定的边距，inline元素则不会。
- block元素：div、p、h1~h6、hr、ol、ul、form
- inline元素：img label、input、a、span
- 可以在样式中修改display值改变block元素修改为inline block元素，会有一定的边距但不会占据一整行。
矢量图形
- 用矢量图形标签组合画一个完整的圆形
<svg>
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>
