18 12 23 html 基本学习
一个html的基本结构如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
在sublime中打出 ! 加 tab 键可以调出
html标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
html段落标签、换行标签与字符实体
<p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开
代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入<br />来强制换行,
html块标签、含样式的标签
1、<div> 标签 块元素,表示一块内容,没有具体的语义。
2、<span> 标签 行内元素,表示一行中的一小段内容,没有具体的语义
1、<em> 标签 行内元素,表示语气中的强调词
2、<i> 标签 行内元素,表示专业词汇
3、<b> 标签 行内元素,表示文档中的关键字或者产品名
4、<strong> 标签 行内元素,表示非常重要的内容
语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多
html图像标签
<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:
- src属性 定义图片的引用地址
- alt属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。
-
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
-
“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片
html链接标签
<a>标签可以在网页上定义一个链接地址,它的常用属性有:
- href属性 定义跳转的地址
- title属性 定义鼠标悬停时弹出的提示文字框
- target属性 定义链接窗口打开的位置
- target="_self" 缺省值,新页面替换原来的页面,在原来位置打开
- target="_blank" 新页面会在新开的一个浏览器窗口打
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现
无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现