2021-3-22 前端达人
!DOCTYPE html
功能是：告知浏览以哪个版本来解析HTML的元素
注：必须放在第一行
DOCTYPE 文档声明定义
document 文档
type 类型
charset
utf-8
字符编码集
告诉浏览器用哪一个版本来解析文本（包括标点符号，文字）
viewport
视口（可视窗口）
title
标签页标题
HTML元素的组成部分
元素：起始标记、内容和结束标记
某些元素的起始标记内有属性
属性：属性名和属性值
例如:
<a href="/classroom/17">班级</a>
1
起始标记：
结束标记：
内容：班级
属性：href="/classroom/17"
属性名：href
属性值："/classroom/17"
空元素
类似img元素
<img src="" alt="">
1
没有元素内容和结束标记，称之为：空元素、自闭合元素
乱序铭文
功能：批量生成文本
书写格式：lorem数量（单词个数）
p标签
p标签不能包含（嵌套）p标签，也不能包含标题、div，语义化标签
解析
将我们写出的代码，转换成计算机可以看懂的语言
渲染
再将解析好的语言，通过浏览器渲染展示出来，给用户看。
HTML
是用于定义文档的结构内容（标题、图片等）
HTML英文全称：Hyper Text Markup Language
中文全称：超文本标记语言
CSS
用于定义HTML文档的样式（外观）
CSS英文全称：Cascading Style Sheets
中文全称：层叠样式表
语义化结构
header 页面的头部或者某个区域的头部，一个页面可以使用多个header元素
nav 表示导航栏
article 代表文档、页面或其他可独立部分，常用于定义一篇日志、一条新闻或用户评论。
aside 用于表示当前页面或文章相关的附属信息，可包含该页面或内容相关的引用、侧边栏、广告、导航条等
section 用于表示一个整体的一部分主题
footer 用于表示页面或者某个区域的脚注，可以包含所有放在页面底部的内容
div与语义化结构的区别
div与语义化结构标签的功能是一样的，但是使用语义化结构标签可以让页面结构更加清晰。
a标签
元素书写格式
<a href="目标">内容</a>
1
href属性
页面地址（路径）
多个页面中相互跳转
锚点
可以在同一个页面之间，相互跳转
先将要跳转的位置加上id属性
<h1 id="title2">标题二</h1>
1
将#+属性名
<a href="#title2">跳转到标题二</a>
1
功能链接
打电话
<a href="tel：12345678910">给我打电话</a>
1
发邮件
<a href="mailto：123456789@163.com">给我发邮件</a>
1
返回顶部
<a href="#">返回顶部</a>
1
a标签的打开方式
书写方式：
<a target="_blank" href="目标"></a>
1
属性 target
属性值
_blank 新页面打开
_self 当前页面打开（默认值）
link外部引用的好处
批量修改
复用
绝对路径和相对路径
绝对路径
从根目录开始写，写到要找文件的位置
当网站部署到服务器后，网站中的所有资源都可以通过一个地址（路径）访问
书写格式：协议：//域名/目录
使用场景：
访问站外资源时，只能使用绝对路径
访问站内资源时，若网站已部署到服务器，可以使用绝对路径，并可以省略协议和域名。推荐使用相对路径
相对路径
相对路径是相对于当前资源的位置，只能用于访问站内资源
相对路径的书写格式为：./路径
./ 表示当前资源所在的目录，必须作为相对路径的开始，可省略
…/ 表示返回上一级目录 （…/…/可以返回上两级目录，写几次就可以返回几次
转自：csdn 作者：小王小王 辅助在行
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务