标签，块标签，行标签"/>
HTML学习日记 day01 html基础，head标签，块标签，行标签
目录
01html基础
注释：便于开发人员对开发项目解释和说明性文字
html 超文本标记语言，严格意义上来说，不是一个开发语言
html5
html文档是由标签组成
02head标签
主要是 源信息标签
03基础标签-块
块属性标签
1.div 标签
2.h 系列标签
3.p 标签
4.分割线
5.无序列表
6.有序列表
7.定义列表
8.address 地址标签 ，
9.blockquote 引用标签，
01html基础
注释：便于开发人员对开发项目解释和说明性文字
快捷键是ctrl+/
注释不会被应用程序解析
<!-- 注释 -->
html 超文本标记语言，严格意义上来说，不是一个开发语言
html5
html的第五个版本，添加了一些新标签和api，使用H5必须在页面的开头添加以下代码
<!DOCTYPE html>
<!DOCTYPE html>它的含义是 声明当前文档类型是 html5 标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析
html文档是由标签组成
标签分为单标签和双标签，他们的闭合方式不同，标签都需要闭合
单标签：<img />
双标签：<div> 内容 </div>
02head标签
head标签中的内容 不会渲染在页面中
主要是 源信息标签
<meta /> 作用是：设置网站的源信息
<meta charset="UTF-8"><meta charset="gb2312">charset 属性。用来定义文本的编码格式
UTF-8：万国码，目前开发中最常用
gb2312：中文码
通常都把 charset 的值设置成 UTF-8,如果不设置charset属性，可能会导致页面乱码，解决方案是设置成utf-8即可
<meta author="科">author属性，用来定义网站的作者，一般是公司的名字
<meta keywords="唱跳,rap,篮球" />最常用
keywords属性用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个
精准的keywords 值，更加有利于SEO（搜索引擎优化）
<meta description="网站描述......" />description 属性，用来简单的 描述 网站的内容，不要超过100个字，有利于SEO
<meta name="viewport" content="width=device-width, initial-scale=1.0">meta的另一种写法
<meta name="属性名" content="属性值" />
<title>head标签</title>title 标签，他是一个双标签，他的SEO权重很大，因此需要谨慎书写里面的内容
<head><meta charset="UTF-8"><!-- 标签的属性 例如 charset --><meta author="科"><meta keywords="唱跳,rap,篮球" /><meta description="网站描述......" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>head标签</title>
</head><body></body>body 标签里面的内容，会渲染在页面的
可视区域，
03基础标签-块
标签分为 行属性标签 和 块属性标签
块属性标签
怎么样都不会折行，都是向下排列
1.div 标签
没有任何意义的标签，通常用来进行页面布局
<div></div>
<div style="border: 1px #f00 solid;">千里冰封</div><div style="border: 1px #f00 solid;">千里冰封</div>2.h 系列标签
h1-h6 标题
在一个页面当中，h1 最多只能出现一次，h2 做多出现20次
h3-h6 次数不限
h1的用法：
1.logo处
2.资讯详情页的大标题
由于h1的权限较大只能出现在以上两个地方
<h1>万里长城永不倒</h1><h2>万里长城永不倒</h2><h3>万里长城永不倒</h3><h4>万里长城永不倒</h4><h5>万里长城永不倒</h5><h6>万里长城永不倒</h6>3.p 标签
段落标签，它里面一般包含一段文字
<p style="border: 1px #f00 solid;">也许我撞到南墙才会回头吧</p><P>青春要是过去何处找少年</P>4.分割线
单标签 <hr />
换行符 <br />文本换行
<hr /><p style="border: 1px #f00 solid;">也许我撞到南墙才会回头吧 <br/>也许我到了黄河才会死心吧</p>
5.无序列表
ul > li
可以设置他 的 lisy-style-type 属性
square: 实心方块
circle: 空心圆
dotted: 实心圆
none: 取消列表样式
disc: 高版本系统下的默认样式
<ul style="list-style-type: disc;"><li>人之初</li><li>人之初</li><li>人之初</li><li>人之初</li></ul>6.有序列表
ol>li
可以设置他 的 lisy-style-type 属性
lower-alpha: 小写字母
upper-alpha：大写字母
lower-roman: 小写罗马文
upper-roman：大写罗马文
列表 样式 类型
list style type
<ol style="list-style-type: upper-alpha;"><li style="border: 1px #f00 solid;"><p>人之初</p><p>人之初</p></li><li>人之初</li><li>人之初</li><li>人之初</li></ol>ol,ul,li 都是块属性标签
li 是列表项 全名list
并且 ol,ul 的 子元素 ，必须是 li标签, 其他的嵌套在li里 也不能写div标签
7.定义列表
dl>dt
dl>dd
dl: 定义列表的父元素
dt: 快标签，定义列表的 标题项
dd: 快标签，定义列表的 列表项
<dl><dt>早餐</dt><dd>包子</dd><dd>油条</dd><dd>豆浆</dd><dt>中餐</dt><dd>米饭</dd><dd>面条</dd><dd>饺子</dd><dd>螺蛳粉</dd><dd>臭豆腐</dd></dl>8.address 地址标签 ，
一般的， 它的内容是一个地址
<address>区1号</address>9.blockquote 引用标签，
一般引用的是一段文字，他的 cite 属性表示该文字引用的文献名目
<blockquote cite="毛主席语录">要想知道梨子的味道，你必须亲自尝一尝</blockquote>不要使用
html 官方没有的标签， 虽然也会被浏览器渲染，但是不符合 w3c 规范
<h7>大神都是来自地狱的勇士</h7><h7>大神都是来自地狱的勇士</h7><!-- 块是直接占一行，行是写了就横着排 --><!-- 1.span 标记标签 ，没有实际意义， 通常用来渲染文字 相当于块 里面的div--><span style="border:1px #f00 solid;">孙悟空</span><span style="border:1px #f00 solid;">孙悟饭</span><span style="border:1px #f00 solid;">孙悟天</span>更多推荐
HTML学习日记 day01 html基础,head标签,块标签,行标签
发布评论