**段落标签**

<p> <p/>

align是设置段落的对齐方式
align:center 与 align: left效果演示如下

1. 段落标签默认是居中对齐方式
2. 多个段落之间有间

---

```
段落标签

~~

>演示如下图
>由上到下分别是h1到h6
>同样里面的align属可以设置对齐方式 
>如下展示 
> 

```html
 <h1 align:center>一级标签<h1/>
 <h2 align:center>二级标签<h2/>

1. 标题标签默认是加粗的
   2.标题标签是默认向左对齐

---

**表格相关的标签**

<table>
<tr>
  <th><th/>
  <th><th/>
  <th><th/>
<tr/>>
<tr>
  <td><td/>
  <td><td/>
  <td><td/>
<tr/>>
<table/>

其中table只制定一块区域用来 放表格
tr 表标签是表格的行标签
th标签用来定义表格头
td用来定义表格的数据元素

上代码

                <table border="1" width="500" height="400" bgcolor = "aqua" cellpadding="0" cellspacing="0">
                    <tr> <!-- 行标签-->
                        <th>姓名</th><!-- 列标签-->
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                    </tr>
                    <tr> <!-- 行标签-->
                        <td align="left">张三</td><!-- 列标签-->
                        <td align="right">110</td>
                        <td >50</td>
                        <td>50</td>
                    </tr>
                    <tr> <!-- 行标签-->
                        <td valign="top" align="center">李四</td><!-- 列标签-->
                        <td>60</td>
                        <td>90</td>
                        <td>100</td>
                    </tr>
                </table>

效果如图

属性补充:
border=1指的是 边框是1像素
width="500" height="400" 就是字面意思 设置了表格总体的宽高
bgcolor = "aqua" 设置背景颜色
cellpadding="0" 设置表格元素之间的距离
cellspacing="0" 设置表格之间的位置

原始表格样式

扩展:

表格可以通过 table>tr*行数>td*列数 来实现

***img标签***
<img/> 用于将图片放入页面中

例子如下:

这里的src指的是图片存放的路径
注意: 图片虽然也可以设置宽高,但是最好不要设置因为如果随便设置的话,会是的图片的内容不美观

***换行标签***
<br/>

代码如下:

效果如图:

***给文字添加横线***
<s>文字内容<s/>

效果如图:

转义字符列表

<form></form>这是form表单,用来提交数据 :<form action="./temp.html" method="get">

action: 后端或者跳转的网页地址

method: 提交请求的方式(get,post)

<input/> 这是输入标签
type="text" 单行文本输入框

![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/bacfb0d26b614a859fd04f17ac244798.png)


name="文本框" 向后端提交的键
value=" " 向后端提交的值
readonly="readonly  只读不能输入  还可以提交
disabled="disabled""  禁用组件 不能提交数据
placeholder="请输入名字"  默认提示框,不是值

```type="password"  密码框

type="radio" name="gender" 单选框,只能选中一个
选择性的组件要给默认值value
checked="checked" 默认选中

type="file" 上传文件属性

<select name=""> <option value="01">1</option> </select>这是复选框
name="" 提交的键

value="" 提交的值

<textarea rows="5" cols="30" name="address"></textarea>

row=""定义行数
cols="定义列数"
name="" 提交的键
<input type="submit" value="提交">

<input type="reset" /> 重置按钮,将表单内容清空

<input type="button" value="按钮"/>
css

一、级联样式表,修饰网页的内容

<1>行内样式表:

<p style="color: red; font-size: 20px; font-weight: 800;">今天天气很阴</p>
在标签后面使用style属性修饰

<2>内嵌样式表:
<style type="text/css"> p{ color: green; font-size: 20px; } </style>
在head标签里写标签,将css的内容写在此内

<3>外部样式表
就是把css的内容写到另一个文件里,首先要导入那个css文件
<link href="../css/html_css.css" rel="stylesheet"/>

然后在对于的css的文件里写上对应修饰内容

二、选择器

将样式和标签分离,使用选择器实现

         1. 标签选择器 
              标签名{ 样式表 }
         2. 类选择器
               .类名{ }
         3. id选择器
               #id名字,**id是唯一的**
         4. 通配选择器: 即对所有标签进行修饰
               *{}

注意:当一个标签被多个选择器选中,就要考虑选择器优先级

>选择器的组合

```html
            .a1,.a2,#p1,h1{
                font-size: 50px;
            }

后代选择器
.u1 li{ color: #008000; }

三、文本属性:

color:文本颜色
font-size:字体大小
font-weight:字体粗细
font-family:字体类型
text-align:文本对齐方式
text-decoration:文本修饰(underline:下划线,line-through:删除线)
font-style:文本格式(italic:斜体)
line-height:文本行高(38px),设置高度与标签同高,可以竖直居中
litter-spacing:文字间隔(10px)
text-indent:首行缩进(2em,两个字大小或者40px也可以)

四、伪类+透明度

伪类:添加鼠标事件

选择器:hover {事件},当鼠标移入的时候做事件
选择器:active{事件},当鼠标点击的时候做事件
选择器:focus{事件},当获取鼠标焦点时候,触发事件,主要用于文本框的输入

透明度:顾名思义

设置1,没有透明度,设置0,完全透明,看不见
style:opacity:0.5

五、设置列表标签

list-style-type: none;设置列表的标志
list-style-image: url()设置标志的图片位置
list-style-position: inside;设置标志与列表内容的位置
简写:
list-style: inside url(../img/2.jpg) none;

列表默认序号和内容的位置是分开的,如果是的li文字居中,那么序号不会改变位置

# 六、背景设置

                width: 1000px;
                height: 600px;
                background-color: #FAEBD7;背景颜色
                background-image: url(.); 背景图片的目录
                background-repeat: no-repeat; 背景图片是否填充
                background-position: center;  背景图片位置
                background-size: 300px 300px; 背景图片大小


# 七、标签分类


块级标签: 
>无论内容有多少, 都会独占一行
                  默认与浏览器一样宽/父标签一直
                  默认的高是0  靠内容撑起
                  块级标签可以设置宽高
                  ```<p><h1><ul><ol><hr/>

行级标签:

只占内容大小,不会占一行
不能设置宽高,设置了也无效
主要用来包裹文字,对文字内容进行修饰
<font><b><i><a>

行级块:

可以设置宽高,不占一行
img, input

注意:1.<p>标签不能包含任何块标签 2.<a>可以包含任何标签,除了本身

标签的相互转化:

dispaly:(inline,block,none,inlineblock)
dispaly:none与opacity:0
区别:一个是透明度一个是使得标签消失

八、纯净标签

行标签:span
块标签:div

九、盒子模型

内容区指得是盒子放置内容的大小,
如果没有设置内边距,边框,标签大小就是内容大小

<1>设置内边距(padding),是给内容外加
padding:5px 上下左右
padding:5px,10px 上下,左右

<2>设置外边距(margin)

外边距即是标签与标签之间的距离

margin的值可以为负值。
如果设置margin_left:auto, 会默认设置距离左边的距离最大(即该标签直接到最右边)
同理左边
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
如果设置左右都是margin:auto的话就会使得该标签水平居中

<3>设置边框
可以使用border属性来设置盒子的边框

border:1px red solid; 直接一次性的设置了边框的宽度,颜色,样式
也可以使用border-top/left/right/bottom分别设置四个边的边框

边框还可以设置样式:
dotted(电线),dashed(虚线),solid(实线),double(双线),groove(槽线)
border_radius:可以设置四个角为圆角边框
border-top-left-radius:可以设置左上角是圆角框

十、取出浏览器的默认样式

很多浏览器都设置了一些默认的margin和padding,所以在编写样式之前要将浏览器的margin和padding去掉

 *{
        margin:0
        padding:0
}

十一、浮动

浮动即:使得标签浮动,脱离当前的文档流
也就是不再在文档中占用位置
就是说当一个div里的标签浮动以后,脱离文档流,不会在影响父标签的高度,浮动不会撑开父标签
使用浮动:

<1>使用浮动

使用float属性可以定义浮动,
float: none:不浮动,left 向左浮动,reght 向右浮动

注意:块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变成一个块级标签,当一个块级标签浮动以后,宽度会默认是内容的宽度

问题抛出:当一个标签浮动以后,原来位置没被占用,就不会撑开父标签高度

问题处理: 清除浮动

<2>清除浮动
可以在浮动标签下建立