一个基础的HTML页面

<!DOCTYPE html><!-- 声明语句，html语言版本类型的声明 不是标签-->
<html lang = "en"><!--双标签
<html></html>是页面根标签
所有的页面代码 全部写在 html 标签中
lang 属性 （langage）语言属性
     en => 英文
     zh => 中文 -->
 <head><!-- 双标签 头部标签
            设置网页基本信息的标签-->
    <meta charset = "UTF-8"><!-- 单标签
                                  meta 是设置标签
                                  用来设置网页具体信息
                                  charset属性
                                  用来设置网页编码格式-->
    <title> 初始HTML </title><!-- 设置网站标题-->
    <style>
       div<!--标签选择器-->{
}
      .d1<!--类选择器-->{
}
      #first<!--id选择器-->{
}
      *<!--通配符选择器-->{
}
      ul{
        list-style-type:none;<!--去掉默认效果 就是 样式初始化-->
}
      ol{
        list-style-type:none;
}
    </style><!--内联样式-->
    <link rel = "" href = "">
    
  </head>
  <body><!--内容标签
            所有 页面内容都在body中 编写-->
    <div></div><!--双标签 块标签-->
    <div style = ""></div><!---其中style在div中属于 行间样式->
    <span></span><!--双标签 行标签-->
    <img src = "stylesheet" alt = "./**.css"><!--其中.css文件是外联样式-->
    <ul>
      <li></li><!--块标签-->
    <ul><!--无序列表 块标签-->
    <ol>
      <li></li>
    <ol><!--有序列表 块标签-->
    <div class = "d1"></div>
    <div id = "first"></div>
        <h1>这是我的标题</h1><!--通常用来写大小标题-->
        <h2>这是我的标题</h2>
        <h3>这是我的标题</h3>
        <h4>这是我的标题</h4>
        <h5>这是我的标题</h5>
        <h6>这是我的标题</h6>
    <p>asdasdadad</p><!--承载大段文字-->
    <p>adsadadada</p>
    <p>哦啊达瓦啊发发发发发付啊发发<br>爱我都不开发</p>
    <div>123121313<br>dadadadad</div><!--其中 br 是换行的-->
    <span>adawda<br>faadadad</span>
    <hr><!--一条线-->
    <img src="https://i02piccdn.sogoucdn.com/f15eb8a400103bb1" width="300" height="200" alt="你要的东西不在哦"><!--写图片-->
   </body>
</html>

1.行标签和块标签

标签（别称元素盒子）

承载超文档流的容器
所有的文本信息都必须写在标签中
根据有无闭合标签可分为
双标签：html head body div span style ol ul li {例如：<html></html>}
单标签：meta link img {例如：<meta>}
根据页面渲染结果可分为
块标签 div
1.独占一行每个块标签都会导致文本流换行
2.可以设置宽、高
不设置高度时-->高度由内容撑开
不设置宽度时-->宽度和父盒子等宽
3.可以嵌套块标签和行标签
标签之间的嵌套关系
我们拟人化的称之为父子关系
<div> =>父标签
<div></div> =>子标签
</div>
行标签 span
1.可以在一行之间排列但是如果超出父盒子的宽度则会换行（如果是单个行标签超出宽度此情况不换行）
2.不能设置宽高宽高由内容撑开
3.可以嵌套块标签但是！！！不推荐！！！

区别	行标签和块标签
相同	都可以嵌套标签
不同	块标签：每个块标签占一行；可以设置高度；块标签可以嵌套块标签和行标签两个标签。行标签：可以在一行之内排列，一行排满在换行；不能设置宽高；可以嵌套块标签，但是不推荐嵌套块标签！！！

2.css引入方式

css的引入方式有三种

行间样式	内联样式	外联样式
在标签中通过style属性来写css代码	内联样式将css代码写在页面的<style></style>中；从编译的角度来讲，style标签可以写在html根标签的任意位置，但是，前端代码规范中，规定一般将style标签写在 head 的闭合标签的上面	在外部创建一个.css文件，并在html文件中 head 标签内 title标签下使用 link标签引入（link标签中 href属性内写要引入css的文件路径）
优点：优先级高方便（哪里需要写哪里）	优点：可复用性高；代码整洁；利于维护。	会使页面变得很长；所以一般的小型项目以及页面推荐使用内联样式
缺点：不利于维护显得页面太过杂乱	逻辑清晰；页面整洁；易于维护；可复用性高。	加大了项目所占内存；所以一般多页面的项目推荐使用外联样式

3.文件路径的编写

本层文件 =>./文件名.后缀名
上层文件 =>../文件名.后缀名
上上层文件 =>../../文件名.后缀名
下层文件 =>文件夹名/文件名.后缀名

4.css选择器

一般的命名规范-->按照W3C规范 “W3C指的是万维网联盟” 命名有以下几种规范（包括类名文件或文件夹名等所能遇到的所有命名）

1.命名中只能存在字母数据下划线
2.命名需以字母开头（不以字母开头也可以，但最好使用字母开头）
3.命名必须遵守语义化
4.不要用拼音及拼音缩写尽量使用单词

两种格式

1.驼峰命名
例如：商品列表商品 => goods 列表=> list =>goodList（小驼峰）推荐 =>GoodList（大驼峰）

类选择器（class选择器）

当同种标签过多时我们可以使用标签中 class 属性给标签起个名字（类名）然后在 css 中使用 .类名的方式选择具体的标签并编写样式
一个标签可以有多个类名每个类名以空格隔开
类名可以重复使用

<style>
.d1{
样式名：值；
}
</style>

标签选择器

直接在 style 中使用标签名的方式来选择具体标签

<style>
div{
样式名：值；
}
</style>

id选择器

需要在标签内使用 id这个属性来设置id 然后在style标签中使用 #id名的形式选择具体标签

<style>
#first{
样式名：值；
}
</style>

通配符选择器

优先级最低的选择器

<style>
*{
样式名：值；
}
</style>

注意！！！
id具有唯一性整个页面中 id不能重复！！！！！！
通常情况下一个标签只能有一个id
不建议使用 id 来写css
区分理解 css 和 id
人名相当于 class 因为人名可以重复
身份证号相当于 id 因为身份证号不能重复

群组选择器

可以配合着 class 和 id 等选择器一起使用
多个选择器之间以逗号隔开
例如：选择器1，选择器2，选择器3{
}

div,.s1{
background:fuchsia;
}

组合选择器

详细的描述一个标签的属性或标签名
有几个 class 就写几个 class 写的详细优先级越高
注意！！！中间不能有空格！！！！！！

.d1.d2.d3{
background: yellow;
}

后代选择器

父选择器与子选择器之间以空格隔开
例如：.f1 .f2 .f3{
}

.f1 .f2 .f3{
background: yellowgreen;
}

子选择器

父选择器与子选择器之间以 > 隔开
注意！！！
只能选择直属子元素不能选择后代元素
例如：.f1>.f2{
}

.f1>.f3{
background: red;
}

选择器的优先级
注意！！！行内样式（最高级）
id选择器>类选择器>标签选择器>通配符选择器
群组选择器>后代选择器；后代选择器与子代选择器优先级相同
后代选择器的优先级是id、类、标签选择的相加之和

5.常用标签

ul标签

ul	ol
无序列表	有序列表
特征：每一行前面都一个小点通常我们英它来写列表或导航栏	每一行都一个序号
默认效果是点	默认效果是序号

ul 、 ol 、li都是块标签；ul 和 ol 去掉默认效果就叫样式初始化-->list-style-type:none;ol 和 ul 标签样式初始化后两者没有区别一般只是用ul标签

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>

h1~h6标签

通常用来写大小标题
h1 标签通常一个页面只能存在一个 h1 标签；通常 h1 标签用来承载网站名或者 logo；如果网站logo出现在多个地方，只给顶部的logo加上 h1 标签
h2 标签可以有多个但一般用来写网站模块标题

<h1>这是我的标题</h1>
<h2>这是我的标题</h2>
<h3>这是我的标题</h3>
<h4>这是我的标题</h4>
<h5>这是我的标题</h5>
<h6>这是我的标题</h6>

p标签

通常用来承载大段文字 p标签不能包块标签

<p>asdasdadad</p>
<p>adsadadada</p>

br标签

是一个功能性标签在哪里写哪里换行
hr 标签--> 生成一条线

<p>哦啊达瓦啊发发发发发付啊发发<br>爱我都不开发</p>
<div>123121313<br>dadadadad</div>
<span>adawda<br>faadadad</span>
<hr>

img标签

用来写图片
src => 用来设置图片路径
alt => 当图片加载失败时的提示信息
单标签行标签
自带 width 和 height 属性写数值时直接写数值不用带单位 css优先级高于 img 标签中 width 和 height 属性

网络图片
<img src="https://i02piccdn.sogoucdn.com/f15eb8a400103bb1" width="300" height="200" alt="你要的东西不在哦">
本地图片
<img src="../../IMG/4.jpg" alt="你要的东西不在哦">

初识代码html

初识代码html

一个基础的HTML页面

1.行标签和块标签

2.css引入方式

3.文件路径的编写

4.css选择器

一般的命名规范-->按照W3C规范 “W3C指的是万维网联盟” 命名有以下几种规范（包括类名文件或文件夹名等所能遇到的所有命名）

两种格式

5.常用标签

推荐阅读更多精彩内容

初识代码html

一个基础的HTML页面

1.行标签和块标签

2.css引入方式

3.文件路径的编写

4.css选择器

一般的命名规范-->按照W3C规范 “W3C指的是万维网联盟” 命名有以下几种规范（包括类名 文件或文件夹名等所能遇到的所有命名）

两种格式

5.常用标签

推荐阅读更多精彩内容

一般的命名规范-->按照W3C规范 “W3C指的是万维网联盟” 命名有以下几种规范（包括类名文件或文件夹名等所能遇到的所有命名）