前端的基础知识笔记(一)HTML入门(未完待续...)

小编是一位前端的初学者, 下面为大家分享一些在学习过程中整理的一些知识要点和个人的理解,希望这些知识点对跟我一样的初学者有所帮助,也欢迎各位大佬前来指导。
前端的三驾马车
(HyperText MarkupLanguage 超文本标记语言)编辑网页的结构和内容
Hyper Text(超文本):文本,图片,链接,音乐,视频等元素都是超文本
Markup Language 标记语言(标记/标签)HTML网页就是用很多个元素组成的
CSS (Cascading Style Sheets层叠样式表)定义图层样式
JS(JavaScript )控制页面的交互效果等
HTML的head部分
<!DOCTYPE html> 告诉浏览器代码是html的版本(HTML5)
Document:文档 type:类型
HTML5之前的版本有HTML4.01,3.2和2.0
<meta charset="UTF-8"> 告诉浏览器解析的模式(标准模式 浏览器自己的模式)
<meta keyword="内容">关键词,可以优化搜索引擎,提高搜索质量
<meta discription="">对网页的主要内容的大概描述,百度搜索出来标题下的文字
<title>Document</title>标题,在标题栏/标签页上面
HTML注释:<!-- -->( 快捷键ctrl+? 方便后期的维护,还有开发者在敲代码的时候能更方便的看到这段代码写的那个板块)
元素的组成:
<起始标签/>元素内容<结束标签/>
空元素(没有元素内容):img:<img src="图片URL位置" alt="图片替代文字"><img />
嵌套:元素的内容包含其他元素
A元素包含B元素,A就是B的父元素,B是A的子元素,两个元素有同一个父元素,它们就是兄弟元素;
A直接或间接包含B,A是B的祖先元素,B是A的后代元素
语义化标签
语义化结构元素(作用:搜索引擎优化;可被特殊设备读取;作者在写的过程中也更方便快捷的看到这个部分是什么板块)
header:用于表示页面或某个区域的头部
nav:用于表示导航栏
aside:用于表示跟周围主题相关的附加信息
article:用于表示文章或其他可独立页面存在的内容
section:用于表示一个整体的一部分主题
footer:用于表示页面或某个区域的脚注
绝对路径:协议://域名/目录
例如:http://www.baidu.com/zhido可省略协议和域名(访问站内):/zhidao
相对路径(上上级):…/…/
同页面跳转(锚点):(内容较多使用,同页面跳转到想到的位置)

<a href="目标">内容</a>

给想要跳转到的位置的标签加个id
然后在herf里面写#id名
Emmet插件:批量生成标签和内容
lorem+个数:批量生成单词(乱序铭文)
a(功能链接):
mailto:邮件地址
tel:电话号码 设别具备通话功能
a(功能链接):
在href里面
mailto:邮件地址
tel:电话号码 (设别具备通话功能)
在herf后面
Target:页面打开的方式(写在herf后面)
target_self 默认值 当前窗口打开(写在herf后面)
target_blank 创建一个新窗口打开
同时创建多个元素
article>section3>h1+p3>lorem50
a标签不能嵌套a标签
p标签不能嵌套划分结构的标签;标题标签和自己
文本标签
h1-6标题标签
span小段问子内容的展示
q:小段引用(名人名言) 文本内容自带引号
blockquote 大段引用(引用一个大的段落文案) 文本自带缩进
cite引用(斜体) 即可以当标签 还可以当属性(话是从哪里来的 给搜索引擎看的)
内容
abbr 缩写 专业术语解释 鼠标移到的时候回显示

<abber title=”鼠标移到的时候回显示的内容”>缩写内容</abber>

强调文本标签
strong: 在阅读浏览器会加重读音
b 不用推荐使用这个标签因为字体加粗不知道加了多少像素 在阅读浏览器不加重读音
em 斜体 阅读浏览器会加重读音
I 斜体 阅读浏览器不会加重读音
sup在文字的上边像平方
sub在文字下方

无语义元素
div 划分区块的
span 给小段文字加样式的标签
br 不使用 来换行的 空元素 从哪里换行直接加

hr分割线 不能用
内容会自己合并空格回车成为一个空格
pre标签 复制html代码格式到页面中展示 不会合并空格和回车
实体字符
书写格式 &开始(实体字符) ;结束
Nbsp空格 gt大于号 lt小于号 copy版权符号 amp&符号
Eg:&nbsp;

后期小编也会持续更新,欢迎各位初学者前来交流,也希望路过的大佬们可以多多指点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值