零、学习中的补充
1、head中的meta
< meta http-equiv="refresh" content="2;url=http://www.baidu.com">
这段代码表示2s后当前网页会自动refresh跳转到http://www.baidu.com页面。
一般来说,HTML中只有六个标签可以放在head中:title、meta、style、link、script、base。
2、静态页面和动态页面
两者区别:是否与服务器进行数据交互。
带有音频和视频/带有flash动画/带有CSS动画/带有javascript动画的都仍旧是静态页面!动态页面需要用到后端技术与服务器发生数据交互。
3、位图和矢量图
位图适用于展示色彩丰富的图片,而矢量图不适于。
位图的组成单位是“像素”,而矢量图的组成单位是“数学向量”。
位图受分辨率影响,当图片放大或者缩小时会失真;矢量图不受分辨率影响,不会失真。
网页中的图片绝大多数都是位图,而不是矢量图。
一、文本格式化标签
<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<big>大字号文本</big>
<small>小字号文本</small>
优先使用第一种突出强调的方式,语义化更强。
二、div和span标签
两种标签都可用来布局,没有语义,实质上是盒子,用于存放内容。它们最重要的作用是划分区域,然后结合CSS针对该区域进行样式控制。
区别在于div是块标签,独占一行,理解为大盒子;span标签是行标签,一行上可以放多个span,理解为小盒子。
三、图像标签
<img src="" alt="替换文本" title="指示文本" width="" height="" border="" / >
src和alt是必须属性,src指示图片路径。border的图片边框效果一般由CSS实现。
三、相对路径和绝对路径
相对路径:同一级直接引用;下一级/引用;上一级../引用。(反斜杠)
绝对路径:盘符地址(正斜杠)/网络地址。
四、链接标签
< a href="" target="_blank/_self/_top/_parent">HTML元素< /a>
href是必须属性,target规定打开目标链接的方式。
超链接的分类:
1、外部链接
< a href="http://www.baidu.com">百度< /a>
2、内部链接
< a href="Iframe_test.html">案例网页< /a>
3、空链接
< a href="#">< /a>
4、锚点链接
< a href="#person">个人主页< /a>
< h6 id="person">个人主页< /h6>
五、注释标签和特殊字符
< !-- 我想喝手磨咖啡 -->
快捷键:Ctrl+/
字符实体:& nbsp;& lt;& gt;
六、表格标签
表格不是用来布局,是用来展示数据的。
1、表格结构和属性
表头单元格1 | 表头单元格2 |
---|---|
表行单元格1 | 表行单元格2 |
表行单元格3 | 表行单元格4 |
标准单元格5 | 标准单元格6 |
2、合并单元格三部曲
1)先确定是跨行还是跨列合并
2)确定目标单元格,写上合并方式=合并的单元格数量,例如:< td colspan="2">< /td>
3)删除多余的单元格
七、列表标签
1、无序列表 ul>li
无序列表常用于布局。
<ul type="disc/circle/square">
<li>无序选项1</li>
<li>无需选项2</li>
<li>无需选项3</li>
</ul>
2、有序列表 ol>li
<ol type="1/a/A/i/I">
<li>有序选项1</li>
<li>有序选项2</li>
<li>有序选项3</li>
</ol>
3、自定义列表 dl>dt=dd
<dl>
<dt>联系我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>小米官方</dd>
</dl>
八、表单
从外观来看,表单可以分为8种:单行文本框、密码文本框、单选框、复选框、按钮、多行文本框、下拉列表、文件上传。
1、form标签
< form name="表单名称" method="提交方式:post/get" action="提交地址" target="打开方式" enctype="编码方式" >
表单内容
< /form>
2、表单输入input标签
<!-- 单行文本框 -->
单行文本框<input type="text" value="文本默认值" size="文本框长度" maxlength="最大容纳字符数">
<!-- 密码框 -->
密码框<input type="password" value="文本默认值" size="文本框长度" maxlength="最大容纳字符数">
<!-- 单选按钮 -->
<label><input type="radio" name="单选按钮群组名" value="取值">单选按钮名称</label>
<!-- 复选框 -->
<label><input type="checkbox" name="复选按钮群组名" value="取值">复选按钮名称</label>
<!-- 按钮 -->
<input type="button" value="普通按钮"> <!-- 结合js做动作 -->
<input type="submit" value="提交按钮"> <!-- 将数据提交到服务器 -->
<input type="reset" value="重置按钮"> <!-- 重置表单数据 -->
<!-- 多行文本框 -->
<textarea rows="行数" cols="列数" value="取值">文本默认内容</textarea>
<!-- 上传文件 -->
<input type="file">
3、下拉列表select标签
<select size="5" multiple>
<option>HTML</option>
<option value="CSS" selected>CSS</option>
<option>JavaScript</option>
<option>jQuery</option>
<option>ES6</option>
<option>移动Web</option>
</select>
设置mutiple后,使用"Ctrl+鼠标左键"可以选取多项。size是显示的列表项数。
几乎所有的表单元素都有value属性,这个属性是配合JavaScript和服务器进行操作的。表单元素在无需与服务器进行交互时,不需要写在表单元素form中。
九、框架
内框架,指的是在当前网页中嵌入另一个页面。
<iframe src="http://www.lvyestudy.com" width="200" depth="150"></iframe>
<iframe src="https://www.51cto.com" width="200" height="150"></iframe>
src是必须属性。
标签:HTML,矢量图,标签,单元格,基础,表单,href,CSS From: https://www.cnblogs.com/w-yuanyuan/p/17019827.html