首页 > 其他分享 >HTML和CSS每周总结6.7day

HTML和CSS每周总结6.7day

时间:2024-06-09 23:30:32浏览次数:18  
标签:超链接 标签 6.7 HTML 字体 样式表 font day 加粗

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

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

标签:超链接,标签,6.7,HTML,字体,样式表,font,day,加粗
From: https://blog.csdn.net/2201_75555400/article/details/139536285

相关文章

  • Day4—电商日志数据分析
    项目要求:根据电商日志文件,分析:1.统计页面浏览量(每行记录就是一次浏览)2.统计各个省份的浏览量(需要解析IP)3.日志的ETL操作(ETL:数据从来源端经过抽取(Extract)、转换(Transform)、加载(Load)至目的端的过程)为什么要ETL:没有必要解析出所有数据,只需要解析出有价值的字段即可。......
  • HTML+CSS 生成跳动的心
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>跳动的心</title>  &......
  • HTML+CSS生成滑动门
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>滑动门</title>  &l......
  • 如何在html中插入背景图片
    在头标签<head></head>里,使用<style></style>标签,可以设置图片背景颜色、透明度等opacity的范围是0-1,数值越大,背景的透明度更低即页面更清晰<head><metacharset="UTF-8"><title>用户管理</title><style>body{backgro......
  • 6.7总结
    第三版,差不多是最后一个版本了<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="render......
  • [Day 5] 區塊鏈與人工智能的聯動應用:理論、技術與實踐
    人工智能的基本算法人工智能(AI)是計算機科學的一個分支,旨在創建能夠模仿或超越人類智能行為的機器。AI的實現依賴於各種算法,這些算法能夠讓機器學習、推理、規劃和感知。這篇文章將深入介紹幾個主要的AI基本算法,包括線性回歸、邏輯回歸、決策樹、支持向量機、k最近鄰、樸素貝葉......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(中山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • Day21.软件开发的目录规范part1_ATM创建
    1.软件开发的目录规范part1_ATM文件结构2.软件开发的目录规范part1_ATM中bin目录下start文件代码内容3.软件开发的目录规范part1_ATM中conf目录下settings文件代码内容4.软件开发的目录规范part1_ATM中core目录下src文件代码内容 ......
  • Day24.日志轮换
    1.setting.py文件中,LOGGING_DIC----->handlers下的default字典中的参数解释注:`maxBytes`和`backupCount`两个key值的使用#打印到文件的日志,收集info及以上的日志'default':{'level':'DEBUG',#'class':'lo......