HTML常用标签与CSS属性

HTML（超文本标记语言）

html与xhtml区别

1. 在html中标签名可以大（小）写xhtml只能小写
2. 在html中标签可以不闭合，xhtml必须闭合
3. 在html中嵌套可以先开始先结束，xhtml必须符合规则
4. xhtml是html的严格版

标签、属性、元素

1. 标签

<name></name>

2. 属性

id="uname"
id叫属性名 uname叫属性值

3. 元素

<name id="uname">张三</name>
元素:开始标签+结束标签+属性+标签中的内容

h1~h6标题标签

	<h1>第一观察</h1>
    <h2>第一观察</h2>
    <h3>第一观察</h3>
    <h4>第一观察</h4>
    <h5>第一观察</h5>
    <h6>第一观察</h6>

：h1最大，h6最小

hr标签

• hr是单标签,因为他只有开始没有结束
• 在hr标签中 后面的/可以加可以不加
• 表示一条分割线

<hr>
<h1 class="haha">我是一个h1标签</h1>
<hr />

p标签

• 是男标签（块级元素）
• 独占一行

br标签

• 换行的作用

文本格式化标签

<!-- b标签 加粗的 bold -->
    <b>b标签版</b>
    <hr>
    <!-- strong 加粗 -->
    <strong>strong标签版</strong>
    <hr>
    <!-- i标签 斜体标签 -->
    <i>i标签版</i>
    <hr>
    <!-- em标签 斜体标签 -->
    <em>em标签版</em>
    <hr>
    <!-- u标签 表示带下划线 -->
    <u>u标签版</u>
    <hr>
    <!-- s标签 表示中划线 -->
    <s>s标签版</s>
    <hr>
    <!-- del标签 表示被删除 -->
    <del>del标签版</del>
    <hr>
    <!-- ins标签,也是带下划线 -->
    <ins>ins标签版</ins>

div标签

• 容器

span标签

• 女标签（行内元素）
• 不独占一行
• 当一个男标签和一个女标签在一起的时候,也是两行 男标签的优先级别＞女标签

img标签

1. 人妖标签（行内块元素）
2. 人妖标签可以和女标签共处一行
3. 人妖标签不可以和男标签共处一行

 <img src="./img/001.jpg" alt="你的图片炸了">

4. src中写图片的路径 地址
5. alt表示当你图片的路径出问题的时候,也就是说图片找不到的时候 显示alt中的内容
6. src中写线上地址有网络可以加载

a标签

1. a标签是一个 女标签（行内元素）
2. 女标签不能设置宽高
3. 超链接标签 点一下会跳转到新的页面

	 <a href="http://www.baidu.com">百度一下 默认版</a>
     <!-- 默认的是 在当前选项卡跳转 -->
     <a href="http://www.baidu.com" target="_self">百度一下 _self版</a>
     <!-- _self版也是在本地跳转 -->
     <a href="http://www.baidu.com" target="_blank">百度一下 _blank版</a>
     <!-- _blank版是打开一个新的选项卡 -->
     <a href="#">这是一个空链接</a>
     <!-- #是一个锚点链接 -->

4. href属性代表我们要链接的资源属性值为他的地址

5. target属性：（target有目标的意思）

        1）_self 在当前选项卡跳转
        2）_blank 打开一个新的选项卡
   

列表

1. 自定义列表 dl+dt+dd
2. 有序列表 ol+li
3. 无序列表 ul+li

表格

 <table border="1" cellspacing="0" width="1200px" height="500px" align="center">
        <tr align="center">
            <td colspan="2">时间</td>
            <!-- <td></td> -->
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr align="center">
            <td rowspan="6">上午</td>
            <td colspan="6">大课间</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align=<