首页 前端知识 HTML和CSS每周总结6.7day

HTML和CSS每周总结6.7day

2024-06-10 23:06:49 前端知识 前端哥 842 138 我要收藏

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

一,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了家人们最后祝你们端午节快乐!明天见

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11866.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!