作者: littleboy 2023-08-05 19:54:01

html基础知识

浏览器渲染流程

基础知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
---
layout: false
---
<!DOCTYPE html>
<html>
<head>
    <title>网站标题</title>
    <base>
    <link rel="stylesheet" type="text/css" href="mystyle.css"><!外部样式�? 
    <link rel="shortcut icon" href="页面ico图标文件路径">
    <meta charset="utf-8">
    <script></script>
    <style type="text/css"> h1 {background-color:yellow;} p1 {color:blue;}</style><!内部样式�? 
</head>

<body>
    <h1>h1标题标签</h1><!h1~6> 
    <hr><!--这是分割--> 
    <div><!块级元素
        <p>段落标签
            <br>分段标签</br>
            <b>加粗文本</b><br>
            <i>斜体文本</i><br>        
            <code>电脑自动输出</code><br>
            <sub> 下标</sub> <sup> 上标</sup><br>
            <a href="https://www.runoob.com">链接标签</a><br>
            <a href="#">链接标签</a><br><!--#号死链接-->
            <a href="#跳转id">Contacts</a><!--#号+id可用于跳转-->
            <h2 id="跳转id">Contacts</h2>
            <img src="Assert\图片路径.png" width="258" height="39"alt="无法加载提示">
            <map><!定义图像地图></map>
            <area><!定义图像地图的可点击区域>   
        </p>
    </div>
    <table border="1" cellpadding="10" cellspacing="0">
        <caption>table name</caption>
        <tr>
            <td>1,1</td>
            <td>1,2</td>
            <th colspan="2">单元格跨两列</th>
        </tr>
        <tr>
            <th rowspan="2">单元格跨两行</th>
            <td>2,1</td>
            <td>2,2</td>
            <td>2,3</td>
        </tr>
        <tr>
            <td>3,1</td>
            <td>3,2</td>
            <td>3,3</td>
        </tr>
    </table>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
    <p><hr>
        <h3>笔记</h3>
        属性（有参考文件）：单双引号括起， 属性和属性值对大小写不敏感�?X)HTML 要求使用小写属�?br>
        <a href="//www.runoob.com/html/html-formatting.html">标签�?/a><br>
        CSS：内联样式（属性）、内部样式表（head里的style）、外部引用（CSS文件�?br>
        <a href="//www.runoob.com/html/html-entities.html">特殊字符输入参考：</a><br>
        CSS被用来同时控制多重网页的样式和布局�?br>
        JavaScript 可以让你的网页更加生动。与用户进行交换或者让网页更加生动�?br>
    </p>

</body>
</html>

布局

#演示

CSS

浏览器渲染流程 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <title>网站标题</title>
    <base>
    <link rel="stylesheet" type="text/css" href="mystyle.css"><!--外部样式-->
    <link rel="shortcut icon" href="页面ico图标文件路径">
    <meta charset="utf-8">
    <script></script>
    <style type="text/css"> h1 {background-color:yellow;} p1 {color:blue;}</style><!--内部样式-->
</head>
<body>
    <!--元素样式
        定义字体类型：font-family: sans-serif;
        定义字体大小：font-size: 30px;
        定义字体颜色：color: red;（或#000000，或rgb(0, 0, 0)或hsl(180, 100%, 100%)）
        定义段落行高：line-height
        定义元素居中：margin: auto;
        定义背景颜色：background-color: green;
        定义颜色渐变：background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
        定义图片大小：width: 500px;height: 20px;
        定义内宽：padding: 20px; padding-top（right,bottom,left）; 顺时针上右下左填充padding: 10px 20px 10px 20px;
        定义边距：margin: 20px; 同理padding
    -->
    <!--方法1：定义在h2元素内的样式-->    
    <h2 style="color: red;">CatPhotoApp</h2>
    <!--方法2：定义全部h3元素的样式-->
    <style>h3{font-size: 30px;color: red;}</style>
    <h3>CatPhotoApp</h3>
    <!--方法3：定义样式类,class接收-->
    <style>.imagestyle{width: 500px;}</style>
    <img class="imagestyle" src="截图/css 使用媒体查询改变变量.png" alt="无法加载">
    <!--方法4：定义一个id(唯一性)。来设置单个元素的样式，JavaScript修改特定元素-->
    <style>#cat-photo-app {background-color: green;}</style>
    <h2 id="cat-photo-app">cat-photo-app<h2>
    <!--方法5：定义一个tyle属性选择器，对特定属性值的元素设置样式-->
    <style>[type='checkbox'] {margin: 20px 0px 20px 0px;}</style>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <!--定义多样式时，用空格分开class-->
    <h2 class="class1 class2">
    <!--元素周围添加边框，边框颜色，宽度，类型，圆角（可以是像素值，也可以是百分比）-->
    <style>.thin-red-border {
          border-color: red;
          border-width: 5px;
          border-style: solid;
          border-radius:10px;
          border-radius:50%;
        }
    </style>
    <!--除了px，还有绝对长度in，mm； 相对em，rem-->
    <!--同类型冲突样式，!important;会优于内联会优于id会优先于class，同类型会以最后一个为准-->
    <!--创建自定义 CSS 变量,需为其命名，两个连字符+一个值-->
    <style>.penguin {--penguin-skin:gray;}</style>
    <!--使用自定义 CSS 变量，当浏览器无法显示时，使用备用值内容显示-->
    <style>属性名： var(--penguin-skin,备用值);</style>
    <!--继承 CSS 变量-->
    <style>:root {--penguin-belly: pink;}</style>
</body>
</html>

<!--样式选择器（可多个），p是指定元素的样式-->
<style>.red-text {color: red;p {font-size: 16px;}}</style>
<!--当一种字体不可用时，您可以告诉浏览器“降级”为另一种字体。-->
<style>h2{font-family: Helvetica, sans-serif;}</style>

应用视觉设计

#演示

应用可访问性

#演示

javascript网页跳转

菜鸟教程在线编辑器

#演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate() {
	document.getElementById("demo").innerHTML=Date();
    }
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

显示你的IP地址

IP地址