Web前端基础第一天
1. Web标准的构成
2. HTML标签导读
3. HTML基本结构标签
5. DOCTYPE和lang标签以及字符集的作用
6. 标签语义
4. HTML常用标签
2. HTML标签导读
3. HTML基本结构标签
5. DOCTYPE和lang标签以及字符集的作用
6. 标签语义
4. HTML常用标签
-
Web标准的构成
- 结构:结构对于网页元素进行整理和分类,现阶段主要学的是html
- 表现:表现用于设置元素的板式、颜色、大小等外观样式,主要指的是CSS
- 行为:行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript
-
HTML标签导读
- HTML语法规范:
- HTML标签是由尖括号包围的关键词,例如
<html
。 - HTML标签通常是成对出现的,例如
<html>
和</html>
,我们成为创标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。 - 有些特殊的标签是单个标签,例如
<br/>
,我们成为单标签。
- HTML标签是由尖括号包围的关键词,例如
- 标签关系
- 双标签关系可以分为两类:
包含关系
和并列关系
- 双标签关系可以分为两类:
- HTML语法规范:
-
HTML基本结构标签
<html> <head> <title><title> </head> <body> </body> </html>
-
HTML常用标签
- 标题标签
<h1> - <h6>
重要- 加了标题的文字会加粗,字号也会依次变大
- 每个标题独占一行
- 标题标签
-
DOCTYPE和lang标签以及字符集的作用
<!DOCTYPE html>
-
<html lang="en"> 用来定义当前文档的显示语言
- en:定义语言为英语
- zh-cn:定义语言为中文
<meta charset="utf-8" /> 用来定义字符集
-
标签语义
- 段落标签和换行标签
- 段落标签:
<p></p>
<把HTML文档分成若干段落> - 换行标签:
<br />
<强制换行>
- 段落标签:
- 文本格式化标签
- 加粗标签:
<strong></strong>
和<b></b>
- 文字倾斜:
<em><em>
和<i><i>
- 删除线:
<del></del>
和` - 下划线:
<ins></ins>
和` - 注意:优先使用strong、em、del、ins标签,这些语义笔记强烈
- 加粗标签:
- div和span标签:没有语义,他们是普通盒子,用来装内容
- 图像标签和路径
- img:
<img src="图像URL" />
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换本,图像不能显示的文字 title 文本 提示文本,师表放到图像上,显示的文字 border 像素 设置图像边框粗细
- img:
- 超链接标签
- 链接的语法格式
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
属性 作用 href 用于指定连接目标的URL地址,(必须属性)当标签应用href属性时,他就具有了超链接的功能 target 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
- 链接的语法格式
- 链接分类
- 外部链接:连接到其它网站,如百度
- 内部链接:连接到本站点内的网页
- 空连接:
#
- 下载链接:href中内容为文件,浏览器则会下载此文件
- 网页元素链接:
<a href="http://www.baidu.com" ><img src="baidu.jpg" /></a>
- 锚点链接:点击链接,可以快速定位到页面中的摸个位置
1.在链接文本href属性中国,设置属性值为 `#名字` 的形式,如<a href="#two">第二集</a> 2.找到目标标签,在里面添加一个id属性=刚才的名字,如:<h3 id="two">第二集介绍</h3>
- 段落标签和换行标签
版权声明:本文为gkh35原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。