HTML笔记

2021-11-07 14:33:45 作者：互联网

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