HTML day01

HTML基础

注释：

便于开发人员对项目解释说明性的文字
快捷键是 ctrl+/
注释不会被应用程序解析

html 超文本标记语言

html5 html的第五个版本，添加了一些新标签和api，使用H5必须在页面开头添加以下代码

<!DOCTYP html>

含义是：声明当前文档类型是html5标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析

html文档是由标签组成
标签分为单标签和双标签，它们的闭合方式不同
单标签：

<img />

双标签：

<div>内容</div>

head标签

head标签中的内容 不会渲染在页面中

主要是源信息标签

<meat  />

作用是设置网站的源信息

charset 属性：用来定义文本的编码格式
utf-8 万国码，目前开发中最常用
gb2312：中文码
通常都把 charset 的值设置成 UTF-8，如果不设置 charset 属性，可能会导致页面乱码，解决方式是设置成 utf-8 即可。

author 属性，用来定义网站的作者，一般是公司的名字

keywords 属性，用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个

精准的keywords值，更加有利于SEO（搜索引擎优化）

description 属性，用来简单的描述网站的内容，不要超过100字，有利于SEO（搜索引擎优化）

meta 的另一种写法：

<meta name="属性名" content="属性值"/>

title 标签，它是一个双标签，它的SEO权重很大，所以需要谨慎书写里面的内容

body 标签里面的内容，会渲染在页面的可视区域

基础块标签

标签分为 行属性标签 和 快属性标签

块属性标签：

1.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的用法：
     ①.logo出
     ②.资讯详情页的大标题
  由于h1的权限较大，只能出现在以上两个地方		

3.p标签

 段落标签   它里面一般包含一段温习

4.分割线

<hr />

换行符

<br />

5.无序列表

     ul > li
 可以设置它的 list-style-type 属性
     square：实心方块
     circle:空心圆
     dotted:实心圆
     none:取消列表样式

     disc：高版本系统下的默认样式

<ul style="list-style-type: none;">
          <li>人之初</li>
          <li>人之初</li>
          <li>人之初</li>
          <li>人之初</li>
       </ul>

6.有序列表

 ol > li

可以设置它的 list-style-type 属性
lower-alpha：小写字母
upper-alpha：大写字母
lower-roman：小写罗马文
upper-roman：大写罗马文

<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 是列表项
并且ol，ul，li 的子元素，必须是li标签

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>郑州市二七区学院路xxx号</address>

9.blogkquote

引用标签，一般引用的是一段文字，它的cite属性表示该文字引用的文献名目

<blockquote cite="毛主席语录">要想知道梨子的味道，你必须亲自尝一尝</blockquote>

基础行标签

1.span

标记标签，没有实际意义，通常用来渲染文字