HTML笔记

2021-11-07 14:33:45 阅读：139 来源： 互联网

标签：repeat 望明月 color 标签笔记 HTML background css

HTML基础标签

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <!-- 头部，页面背景上的设置 -->
 5     <meta charset="utf-8">
 6     <!-- meta元标签 -->
 7     <!-- charset编码格式 -->
 8     <meta name="viewport" content="width=device-width, initial-scale=1">
 9     <title>Hello,world</title>
10 </head>
11 <body>
12   <div>无实意标签</div>
13   <p>段落</p>
14   <span>无实意标签</span>
15   <img src="https://www.wahaotu.com/uploads/allimg/202009/1601466985405594.jpg">
16 <ul type="circle"><!-- 无序列表 -->  
17 
18  <li>aaa</li>
19 <li>bbb</li>
20 <li>ccc</li>
21 </ul>
22 <ol type="I">
23     <li>aaa</li>
24 <li>bbb</li>
25 <li>ccc</li>
26 
27 </ol>
28 <input type="text" name="">
29 <input type="number" name="">
30 <input type="password" name="">
31 性别:
32   <!-- 单选框 --><input type="radio" name="gender">男
33 <input type="radio" name="gender">女<br>
34 <!-- 复选框 -->
35 <input type="checkbox" name="">
36  <!--  a 标签是超级链接 --><a href="https://www.baidu.com">  百度一下</a>
37 
38  <h1>1级标签</h1>
39  <h2>2级标签</h2>
40  <h3>3级标签</h3>
41  <h4>4级标签</h4>
42  <h5>5级标签</h5>
43  <h6>6级标签</h6>
44 </body>
45 </html>

css基础

css层叠样式表 特点:1.继承性  2. 层叠性(可被覆盖)

行内样式表，极差，不允许使用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     
 8     <link rel="stylesheet" type="text/css" href="css/main.css">
 9     <!-- 外部样式表/链入样式表 -->
10     <style type="text/css">
11         /* 头部样式表*/
12         ul{
13             background: lightgreen;
14         }
15         li{
16             color: blue;
17         }
18         div{
19             background: lightgreen;
20         }
21     </style>
22 </head>
23 <body>
24 <div style="width:100px; height: 100px; background: lightblue;"> </div>
25 <ul>
26 
27     <li class="xiaoHong">aaaaaa</li>
28     
29     <li>bbbbbb</li>
30     <li id="xiaoMing">cccccc</li>
31     <li class="xiaoHong">dddddd</li>
32     
33     <li>eeeeee</li>
34 </ul>
35 </body>
36 </html>

css代码

/*class类名选择器*/

/*css优先级*/
/*1.后来者居上，越往后越说了算
2.行内样式优先级>头部样式>=外部样式
3.越精确越说了算id>class>标签
4.!important优先级最最高，但是不到迫不得已不要用
5.*/

li{
    color: red;
}
/*标签选择器*/
#xiaoMing{
    color:pink;
}
/*id选择器 ，id唯一且不重复。*/
.xiaoHong{
    color: lightblue ;
}

命名法

驼峰命名法

xiaoMing小驼峰命名法 XiaoMing大驼峰命名法

下划线命名法 xiao_ming

xiao-ming

表现与结构分离

表现:css

结构:html

css常用属性

width:宽度；

height: 高度；

background：背景(是一个复合属性)

background-color

background-image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 500px;
            /*background-color: lightblue;*/
            background: url(https://ts1.cn.mm.bing.net/th?id=OIP-C.5OQ1UC4qRDudD0FFKPcB9QHaEB&w=169&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2)  no-repeat;
            color: red;
            font-size: 20px;
            font-weight: 700px;
            text-indent: 40px;






            /*chrome默认字体16px,最小支持字体12px,*/
            /*background-repeat: no-repeat;*/
            /*background-repeat-x: no-repeat;*/


        }
        #div2{
            width: 300px;
            height: 50px;
            background: lightblue;
            text-align: center;
            line-height: 50px;
            /*单行垂直居中*/

        }
    </style>
</head>
<body>
<div id="div1">

窗前明月光，举头望明月，低头思故乡，

窗前明月光，举头望明月，低头思故乡，

窗前明月光，举头望明月，低头思故乡

窗前明月光，举头望明月，低头思故乡

</div> <div id="div2"> 滕王高阁临江渚 </div> </body> </html>

标签：repeat,望明月,color,标签,笔记,HTML,background,css
来源： https://www.cnblogs.com/sifd/p/15519837.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML笔记

HTML基础标签

css基础

css代码

命名法

css常用属性