HTML-CSS笔记

最新推荐文章于 2022-10-15 16:49:19 发布

Dexter359

最新推荐文章于 2022-10-15 16:49:19 发布

阅读量503

点赞数 1

分类专栏： HTML-CSS笔记

本文链接：https://blog.csdn.net/Dexter7/article/details/119464865

版权

HTML5-CSS3HTML元素的lang属性<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body></html>html元素是HTML...

摘要由CSDN通过智能技术生成

HTML5-CSS3

HTML元素的lang属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        
    </body>
</html>

html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素

w3C标准建议为html元素增加一个lang属性，作用是

帮助语音合成工具确定要使用的发音

帮助翻译工具确定要使用的翻译规则

lang="en"告诉浏览器︰这个HTML文档的语言是英文。

lang="zh"表示这个HTML文档的语言是中文。

head元素嵌套的元素

1.head元素里面的内容是一些“元数据”（元数据︰描述数据的数据)

一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标

2.title元素

网页的标题

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>京东(JD)</title>
        <link rel="icon" href="https: / /www.jd.com/favicon.ico">
        <style>
            h1{
                color：red;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <h1>彭于晏哈哈哈哈哈</h1>
    </body>
</html>

3.meta元素

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码

—般都使用UTF-8编码，涵盖了世界上几乎所有的文字

在HTML5之前，meta标签的写法也是比较复杂的

<meta http-equiv="Conten-Type" content="text/html"; charset="UTF-8">

4.body元素

里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

5.h元素

表示网页的标题

h1~h6共规定了6个等级的标题

6.p元素

表示文章中的一个段落（ paragraph )

标签	功能相同点	功能不同点
p标签	有行间距，默认前后换行	不保留空格和换行，字体不变
pre标签	有行间距，默认前后换行	保留空格和换行，变为等宽字体

7.strong元素

用于强调某些文本，粗体的显示效果

8.code元素

用于显示程序代码

9.br元素

在不产生一个新段落的情况下进行换行，使用< br/>标签。

8.hr元素

分割线

<b> 加粗效果

<i> 斜体效果

<u> 下划线效果

HTML文本格式化

标签	描述
<b>	定义粗体文本
<big>	定义大号字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
< sub>	定义下标字
< sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

HTML样式

style 属性用于改变HTML元素的样式。 *background-color属性为元素定义了背景颜色； font-family定义了文本的字体系列； color 定义了字体颜色； font-size定义了字体尺寸; text-align规定了元素中文本的水平对齐方式。*

要想在网页中正确地显示这些预留子符，必须便用子符实体，书写格式一般有2种

&entity_name;

&#entity_number;

比较常用的有

	描述	实体名称	实体编号
	空格	&nbsp ;	&#160 ;
<	小于号	&lt ；	&#6O ;
>	大于号	&gt ;	&#62 ;
&	和号	&amp ;	&#38 ;
"	双引号	&quot ;	&#34 ;
‘	单引号	&apos ;	&#39 ;
	分(cent)	&cent ;	&#162 ;
	镑[pound)	&pound ;	&#163 ;
￥	元(yen)	&yen ;	&#165 ;
	欧元(euro)	&euro ;	&#8364 ;
	小节	&sect ;	&#167 ;
	版权(copyright)	&copy ;	&#169 ；
	注册商标	&reg ;	&#174 ;
	商标	&trade ;	&#8482 ;
×	乘号	&times ;	&#215 ;
÷	除号	&divide ;	&#247 ;

字符实体练习

<body>
    <div title="我是一段‘特殊’的文本"> 我是彭于晏 </div>
</body>

常用快捷键:

shift + alt + ↑	块移动或行移动
Ctrl+D	复制上一行到下一行
Ctrl+/	可以把选中的代码全部注释掉
shift+F6	重命名
shift+F	搜索
Alt+F2	打开浏览器
ctrl+alt+L	格式化代码
shift+tab	退格
Ctrl+X	删除行
ctrl+k	代码快速格式化美观

span元素的使用

p标签指一个段落，是块级元素，span是行内元素，一般单独修饰文字；

span 标签可以放在p标签里,p标签不应该放在span标签里；

<head>
    <meta charset="UTF-8">
    <title>彭于晏</title>
    <style>
        .text {
            color: blue;
            font-size: 30px;
        }
        .new-price{
            color: red;
            font-size: 30px;
        }
        .oid-price {
            color: aquamarine;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    我是一段文本
    <span class="text">  我也是一段文本 </span>
<!--    价格的显示-->
    <P>
        <span class="new-price">￥69</span>

        <span class="oid-price">￥99</span>
    </P>
</body>

div元素的使用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box1 {
            float: left;
        }

        .box2 {
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h2>哈哈哈哈哈</h2>
        <P>hahahahaha</P>
    </div>

    <div class="box2">
        <h2>呵呵呵呵呵呵呵</h2>
        <P>hehhehehehhehe</P>
    </div>
</html>

结论1

标签	功能
div	定义文档中的分区或节（division/section)。一般用于用于对大的内容块设置样式属性
span	没有特定的含义,一般用于用于为部分文本设置样式属性

ing元素相对路径

img元素如果只设置了width (或height )，浏览器会自动根据图片宽高比计算出height (或width )

在HTML5规范中，alt是img元素的必要属性

width、height的默认单位是px，像素

<body>
    <p>本地图片地址(相对路径）</p>
    <img src="..\img\03.jpg"
         alt=""
         width="300"
    >
    <!-- alt属性：当图片（加载失败）时 显示文本   -->
    <img src="https://safa" alt="gif图片">
</body>

常用图片格式

png: 静态图片，支持透明

jpg : 静态图片，不支持透明

gif : 动态图片、静态图片，支持透明

<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="400" frameborder="no" border="0" width="20%"> </iframe>
原文链接：https://idealclover.top/archives/617/  2021新冠实时疫情图

网站推荐

iconfont 网址查找你想要的小图标

favicon制作图标大小

https://html5.tool.webfrontend.dev/ 学习标签信息

https://www.w3school.com.cn/html/html_css.asp学习HTML

flatuicolors 颜色选择

<l -- body标签的bgco1or团性指定背景颜色。-->
<!-- <body bgcolor="blue"> -->
<l -- body标签的background属性指定背景图片。 -->
<body background="images/01.png">

无序列表

标签	英文含义	功能
ul	unordered lists 的缩写	无序列表的外边界
li	list item的缩写	列表项

<h2>我的笔记</h2>
        <h3>前端技术的作用?</h3>
        <<ul>
            <li>
                <h4>HTML</h4>
                结构，决定网页的结构和内容。(是什么)
            </li>
            <li>
                <h4>cSS</h4>
                表现，设定网页的表现样式。(什么样子)
            </li>
            <li>
                <h4>Javascript</h4>
                行为，控制网页的行为。（做什么)
            </li>
            <hr>
            <!-- 无序列表 -->
            <!-- h3+ul>li*3 -->
            </ul>
            <h3>网站上线流程</h3>
            <ul>
                <li>购买域名</li>
                <li>购买服列器</li>
                <li>网站备案</li>
                <ul>
                    <li>需要在规定的背景布前拍照</li>
                    <li>需要提交规定的表格及资料</li>
                    <li>通过时长略有不同</li>
                </ul>
                
            </ul>
            <hr>

属性属性值

disc（实心圆）

type circle（空心圆）

square（方块）

看书
玩游戏
游泳

有序列表

标签	英文含义	功能
ol	ordered lists的缩写	有序列表的外边界
li	list item的缩写	列表项

<!-- 有序列表 -->
            <!-- h3+ol>li*3 -->
            <h3>网站开发流程</h3>
            <ol>
                <li>网站策划</li>
                <li>网页设计</li>
                <li>前端开发</li>
                <li>后端开发</li>
                <li>测试上线</li>
            </ol>
            
            <hr >

自定义列表

标签	英文含义	功能
dl	definition lists的缩写	自定义列表的外边界
dt	definition term的缩写	列表项中的标题
dd	definition description的缩写	列表项中的内容

<!-- 自定义列表 -->
            <h3>常见问题</h3>
            <dl>
                <dt><b>域名选择有什么建议吗?</b></dt>
                <dd>答:尽量选主流域名。比如cn.com. net等;</dd> 
                <dd>域名长度建议控制在8个字符左右，可以使用英文单词、全拼、简拼来注册</dd>
                <dt><b>服务器购买需要注意什么呢?</b></dt>
                <dd>答:建议根据功能需要来选择配置;</dd>
                <dt><b>网站域名都需要备案吗?</b></dt>
                <dd>答:使用国内的服务器空间，必须备案。</dd>
            </dl>

表格

标签	英文含义	功能
table	表格	表格的外边界
tr	table row的缩写	定义行
td	table data cell的缩写	定义单元格

        <table border="" cellspacing="" cellpadding="">
            <tr><th>课程表</th></tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <!-- (tr>td*4)*5 -->
            <tr><!-- 总共几行 这里是5行 -->
                <td>1</td><!-- 一行有几个单元格 这里是4个 -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            .....
        </table>

table的属性

属性名	功能	常用属性值
border	设置边框默认为0 没有边框	单位为px像素值
cellspacing	外边距，设置单元格与单元格之间的距离	单位为px像素值
cellpadding	内边距。设置文字与单元格之间的距离	默认1px
width	设置表格的宽度	单位px，或者百分比
height	设置表格高度	单位px，或者百分比
align	设置表格在网页中的对齐方式	left左 right右 center居中
bgcolor	设置背景颜色	white red green

表格的合并

标签	功能	属性值
colspan	单元格贯穿多少列(横向合并单元格)	数值
rowspan	单元格贯穿多少行（纵向合并单元格)	数值</

最低0.47元/天解锁文章

Dexter359

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML-CSS笔记

HTML5-CSS3HTML元素的lang属性<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body></html>html元素是HTML...
复制链接

扫一扫