HTML和CSS每周总结6.7day

最近学的东西比较简单就没每天发了，下面我总结一下这周学的东西，最近端午节了祝大家端午节快乐。

一，5.31

1.标签

字体加粗：<b></b>
    字体倾斜：<i></i>
    下划线：<u></u>
    删除线：<s></s>

title网页标题
 段落标签：<p></p>
 换行标签：<br/>
 字体标签：<font color="red" size="7"></font>

图像路径：<img src="图片的路径" title="鼠标悬浮显示文字"alt="不显示图片的时候显示文字"/>
    路径：相对路径和绝对路径
    绝对路径：从盘符开始的路径（不推荐）
    相对路径：图片相对于html文件所在的位置

2.标签的使用

输出结果

二，6.3

1.超链接标签

 <a href=""></a>：

        href用来接收外部链接，内部链接和锚链接。

         <!-- 外部地址 -->
        <a href="https://www.baidu.com/" target="_blank">百度一下</a><br />
        <!-- 内部地址 -->
        <a href="demo531.html" target="_self">qqq</a><br />
        <!-- 不做跳转  #：占位符-->
        <a href="#">null</a><br />
        <!-- 锚链接 -->
        <a href="#one">到页面h2标签</a><br />
        
        <h2 id="one">11111</h2>       

        超链接标签，<a></a> 从一个页面跳转到另外一个页面
        <a href="网址">文字或者图片</a>
        target="_self" 在自身页面打开
        target="_blank" 在新的页面打开

2.有序列表和无序列表

        

3.表格

<table></table>:一个表格 
 border="表格的边框" 
 align="表格的对齐方式 left/center/right"
 width:宽度
 height:高度
 bgcolor:背景颜色
 cellspacing:规定单元格和单元格之间的空白。
合并单元格:
rowspan:跨行
colspan:跨列
    <tr></tr>:表示行
    <td></td>：单元格
    <th></th>:表头单元格，默认字体居中加粗。

三，6.4-6.5

1.表单

        表单的作用:收集数据
    <form action="表单提交的服务器地址" method="表单数据提交的方式 get/post">
    </form>:定义表单,表单元素应该写在form标签中。
    1,get方式不常用，会显示出来；
    2,post相对安全
    3,value 表示默认值，后续可修改。
    表单元素:
    文本框:<input type="text" name="给表单元素起名字" value="默认值" placeholder="提示信息" readonly 只读不能修改/>
    密码框:<input type="password" name="给表单元素起名字" value="默认值"/>
    单选框:<input type="radio name="必须保持一致"/ value="提交的数据" checked="checked"默认选项>
    复选框:<input type="checkbox name="hobby value="提交的数据" checked="checked">
    下拉框:<select name="名字">
                <option value="提交的数据">---</option>
        </select>
    文本域:<textarea type="file" name="名字 ">    
    重置按钮:<input type="reset" value="按钮上的名字" disabled禁用>
    提交按钮:<input type="submit" value="按钮上的文字">
    图片按钮:<input type="reset" src="图片的路径">
    普通按钮:<button></button>

后续可以用css或者javascript渲染，

2.style标签（行内样式表）

3.font标签(css)

font-family:字体样式
 font-weight:字体粗细 400正常，700加粗 也可以使用bold加粗(bold=700)
 
 不仅要会给字体加粗，还要会给加粗的标签不加粗。
 font-weight:normal/400 表示不加粗；
 
 font-style:字体风格
    normal:正常字
    italic:斜体字

3.1 font标签简写

font:简写属性
    font-style font-weight font-size font-family; 
    不需要设置的属性可以省略，必须保留font-size和font-family

4.文本颜色和文本标签

文本颜色有三种

1.文本颜色（red,green,bule这种）

4.2 16进制（最常用）

3.RGB代码

我拿最常用的来举例子

4.3 文本标签（css）

text-align:
    center 居中
    left 靠左
    right 靠右
 
 text-decoration:
    underline下划线
    overline上划线
    line-through 删除线
    none 默认值

四，6.6

1.首行缩进和行高

 text-indent:首行缩进
    em是一个相对单位:相对于当前页面字体的大小。
line-height:行高
    行高=上间距+文字大小+下间距

使用了行外样式表用link标签连接，下面会写出来

这段文章都用了大量的文字缩进和行高。

2.CSS样式表书写的位置

行内样式表:写在标签style属性上
内部样式表:写在页面内
外部样式表:写在页面外

3.伪类选择器

超链接的伪类:
 a:visited :选中的是未被访问的超链接
 a:link:选中的是已被访问的超链接
 a:hover:选中鼠标悬浮到的超链接
 a:active:选中的是激活的超链接
 顺序无法改变

悬停在标签上是橙色，并且出现下划线，点击后字体变20px，变蓝。

五，6.7

1.CSS的显示模式

1.1 块元素: (h1-h6 p [div])

    1.独占一行。
    2.设置宽，高(外边距，内边距)都起作用。
    3.默认宽度是父容器的100%。
    4.是一个容器，or一个盒子。

1.2 行内元素:(a [span] i u font )

    1.一行可以显示多个。
    2.直接设置宽高无效。
    3.默认宽度是本身内容的宽度。
    4.行内元素只能容纳文本，or其他行内元素。

1.3 行内块元素:(img input)

    1.一行可以显示多个,中间会有空白缝隙(行内元素的特点)。
    2.默认的宽度就是它本身内容的宽度。
    3.设置宽高(外边距，内边距)都起作用(块元素的特点)

1.4 元素显示模式之间的转换

    1.转换为块元素: display:block;
    2.转换为行内元素: display:lnline;

2.背景颜色

background-color:背景颜色
    background-image:url:(图片的路径);背景图片
        常用于logo,小图片,超大背景图片;
    background-repeat:背景平铺
        repeat默认值:在纵向和横向平铺。
        repeat-x:在横向平铺。
        repeat-y:在纵向平铺。
        [no-repeat:不平铺]
    background-position: x y
        1.跟方位名词 top center botom left center right;
        2.精确方位
        x:离上边距多少px;
        y：离左or右多少px;
    background: rgba(0,0,0,0) 背景色半透明    
    background-attachment:背景图片固定
        fixed:固定
        scroll:滚动

3.综合案例

外部样式表

鼠标悬停背景颜色变红。

ok了家人们最后祝你们端午节快乐！明天见