学习web前端的历程(二)
2019-07-26 18:02
41 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/l123zmj/article/details/97394856
2.HTML的框架和基本元素(标签)
(1)HTML程序的框架
<!DOCTYPE html> <html> <head lang="en">//里边是语言的设置,en是英文、zh-CN是中文 <meta charset="UTF-8 "> <title> </title>//页面描述性的标题,是必须存在的 </head> <body></body> </html>
mata:提供页面有关的元信息(文档的描述和关键字),其只可以放在 中,属于元信息标签。
keywords是关键字,可以根据关键字来搜到网页。
<meta name ="keywords" content = " (关键字)">
(2)HTML的常用标签
<p></p> 段落标签(分段) <hn></hn> 段落标签(标题标签,其与wps的一、二、三级标题类似) <br/> 换行标签(单标签) <hr/> 水平线标签 <span></span> 、<div></div> 无语义 代码块标签 (两者的差别就是后者可以只动换行)
字体样式标签
strong></strong> 加粗 语气加重 <b></b> 加粗 <em></em> 斜体 <i></i> 斜体 <u></u> 下划线 <s></s> 中划线
特殊符号
为空格; < 小于号; >; 大于号; "; 引号; ©; 版权符号;
图片标签
1.<img/> 其为单标签 2.必须属性 src="(引入图片的存储位置)" 3.常用属性: width 宽 height 高 单位:像素(px)、百分比(%) alt 当图片未能显示,用于给用户提供信息 title 鼠标经过时显示的内容 border 边框 例子: <img src="images/img.jpg" title="动漫图片" width="30%" height="200px" border="5px" alt="替换文本的属性"/>
超链接
1.<a></a> 超链接标签 2.必须属性: href=" " 3.常用属性: href 链接URL(链接地址) target 目标(其属性值_black(在新窗口打开链接地址) 、_self(在当前的窗口打开)) name 锚点名称(快速跳转到想看的内容) <a href="#锚点名">(目录的内容)</a> (给大标题) 1. id="锚点名" (直接给小标题) 2. <a name="锚点名"></a> (直接给小标题) title 经过鼠标时提示的文字
注意:
1.有开始和结束标签、必有属性src、网站链接地址必须以HPPT://开头
2.本地链接地址必须加后缀html
3.标签是可以嵌套的
绝对路径:互联网地址 格式:http:// 域名
本地地址 格式:file:///盘符/目录
相对路径:(相当于自己当前的位置)
("./ 当前目录")…/上级目录
水平线标签
<hr/> 单标签 1.属性: align 水平线 有属性值:center right left width 水平线长度 size 高度 color 颜色 例子: <hr align="center" width="30%" size="5px" color="black">
格式标签
<adress></adress> //斜体表示的文字
预文本格式标签
<pre></pre> //被包围在pre中的元素会保留空格和换行符(原来是什么样子,在网页上看到的也是什么样子)
文本格式化标签
<b></b> 加粗 着重语气字 <strong></strong> 加粗 <em></em> 斜体字 着重语气 <i></i> 斜体字 <u></u> 下划线 <del></del> 删除 ,就如<s></s> <small></small> 小号字 3<sup>5</sup> 定义上标字 (3^5) H<sub>2</sub>O 定义下标字 (水的化学式) <ins></ins> 定义插入字
相关文章推荐
- 学习web前端历程(十六)
- 学习web前端历程(三)
- 学习web前端历程(六)
- 学习web前端历程(九)
- 学习web前端历程(十四)
- web前端的学习历程
- 学习web前端历程(十三)
- 学习web前端历程(十二)
- 学习web前端历程(四)
- 学习web前端历程(五)
- 学习web前端历程(十一)
- 学习web前端历程(十)
- web前端之html从零开始(二)----a标签学习,强化
- 我的前端学习历程
- web前端学习教程:大气炫酷html5响应式带第三方登录页面模板
- [web前端学习笔记]定位的盒子居中显示
- Web前端学习第十三天·fighting_HTML页面设计技巧总结(二)
- 小白学习web前端路线图及学习攻略
- 小白学习Web前端开发大纲
- 刚入行的人员怎样去学习web前端呢?