html决定页面显示什么内容
css决定页面的美观程度

html语言是解释型语言，解释不出来就不管了，不区分大小写
浏览器是容错的

1）html页面由一对标签组成:<html><html/>，分别成为开始标签和结束标签
2）title:表示网页的标题
3）<meta charset="UTF-8"/> 设置字符编码标准
4）<br/> 表示换行 ，单表签：开始标签和结束标签是一个
5）<p> 表示段落标签
6）<img> 表示图片标签
    title标签：鼠标放上可以出现提示的信息
    alt标签：加载没成功会显示的信息
    weight、height表示宽度和高度
7）h1-h6 是标题标签
8）列表标签：
    ol(order list): 有序列表
        start 表示从start开始
        type表示顺序的类型，比如:a,b,c,d ; 1,2,3,4 ;A,B,C,D
    ul(unorder list):无序列表
9）字体类型（可以查找html字符实体）
    <b><b/> 字体加粗
    <i><i/> 字体斜体
    <u><u/> 字体下划线
    <sub><sub/> 下标
    <sup><sup/> 上标
    &lt :小于号  &le :小于等于
    &gt :大于号  &ge :大于等于

10） span 不换行的块标记：将需要处理的内容围起来，之后可以进行处理
11）<a><a/> 超链接
    href ：链接的地址
    target：打开超链接的方式
        _blank:打开一个新的窗口
        _self:在本窗口打开 （默认值）
        _parent :在父窗口打开
        _top：在顶层打开

12）div 层
13) table：表格标签
        <th> 表头
        <tr> 行标签
        <td> 列标签
            rowspan:行合并
            colspan:列合并
        border :单元格的边框类型
        width ：单元格的宽度
        cellspacing:单元格之间的距离
        cellpadding:单元格内部与文字之间的距离
14）form 表单：一个容器，承载我们发送给服务器端的数据
        action；表示将表单发送的目的地
        method：表单的发送方式 get和post
        input
            type:
                text:表示文本框
                password:非明文的文本框
                radio:单选框属性  使用value标签传值
                    通过name属性来单选，必须一致才会有互斥的效果
                    checked：表示默认选中
                checkbox:复选框属性  使用value标签传值
                select:下拉列表
                    option：列表中的选项
                textarea:多行文本框（文本域）
                    rows表示文本框的行数
                    clos表示每行的字数
                    value值：开始标签<textarea>和结束标签<textarea/>之间的值
                以下三个按钮通过value值来显示内容
                submit:提交按钮
                reset:重置按钮 恢复表单的默认状态
                button:普通按钮

            name:必须要指定，如果没有name属性，文本框的值不会传递到服务器端
            value:在单选框radio中必须设置，否则值不会传递到服务器端
15）frameset:框架（页面中不需要body） 相当于布局
        frame 表示框架中的具体页面引用
        iframe：在一个页面嵌入一个子页面

<html>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            position:absolute
        }
        #div1{
            background-color:#ABC
        }
         #div2{
            background-color:#BCA;
            left:100px;
            top:100px;
        }
         #div3{
            background-color:#CAB;
            left:200px;
            top:200px;
        }

    </style>
    <meta charset="UTF-8"/>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        <!--Hello World！<br/>
        你好，html
        <p>第一个段落</p>
        <p>第二个段落</p>
        <img src="imgs/a.jpg" width="53" height="99" title="这里是我的证件照" alt="显示失败"/>
        <h1>标题一</h1>
        <h2>标题一</h2>
        <h3>标题一</h3>
        <h4>标题一</h4>
        <h5>标题一</h5>
        <h6>标题一</h6>-->

       <!-- 武林高手排行榜
        <ol type="A">
            <li>乔峰</li>
            <li>慕容复</li>
            <li>慕容博</li>
            <li>萧远山</li>
        </ol>
        武林大会人员名单
        <ul >
            <li>乔峰</li>
            <li>阿朱</li>
            <li>虚竹</li>
            <li>段誉</li>
        </ul>
        水分子的化学式：H<sub>2</sub>0 <br/>
        x的平方：x<sup>2</sup>

        <span>赵又廷</span>，夺妻之仇
        <a href="http://www.baidu.com" target="_blank">百度一下</a>-->

<!--        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>-->

       <!-- <table border="4" width="500" cellspacing="0" cellpadding="4">
            <tr align="center">
                <th>姓名</th>
                <th>门派</th>
                <th>招数</th>
                <th>武力值</th>
            </tr>
            <tr align="center">
                <td>萧峰</td>
                <td>丐帮</td>
                <td>降龙十八掌</td>
                <td>5000</td>
            </tr>
            <tr align="center">
                <td>虚竹</td>
                <td>灵鹫宫</td>
                <td>北冥神功</td>
                <td>10000</td>
            </tr>
            <tr align="center">
                <td>扫地僧</td>
                <td>少林寺</td>
                <td>七十二绝技</td>
                <td>未知</td>
            </tr>
        </table>

        <table border="1" cellspacing="0" cellpadding="4" width="600">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr align="center">
                <td>苹果</td>
                <td rowspan="2">5</td>
                <td>20</td>
                <td>100</td>
                <td><img src="imgs/del.jpg" width="24" height="24"/></td>
            </tr>
            <tr align="center">
                <td>菠萝</td>

                <td>20</td>
                <td>60</td>
                <td><img src="imgs/del.jpg" width="24" height="24"/></td>
            </tr>
            <tr align="center">
                <td>香蕉</td>
                <td>5</td>
                <td>60</td>
                <td>300</td>
                <td><img src="imgs/del.jpg" width="24" height="24"/></td>
            </tr>
            <tr align="center">
                <td>总计</td>
                <td colspan="4">181</td>
            </tr>
        </table>-->

        <!--<form action="demo02.html" method="get">
            昵称：<input type="text" name="nickName"/><br/>
            密码：<input type="password" name="pwd"/><br/>
            性别：<input type="radio" name="gender" value="male"/> 男
            <input type="radio" name="gender" value="female"/> 女<br/>
            爱好：<input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="footable">足球
            <input type="checkbox" name="hobby" value="earth">地球<br>
            星座：<select name="star">
                <option value="1">白羊座</option>
                <option value="2">水瓶座</option>
                <option value="3">金牛座</option>
        </select><br>
            备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
            <input type="submit" value="注 册">
            <input type="reset" value="重 置">
            <input type="button" value="普通按钮">
        </form>-->

        <frameset rows="20%,*" frameborder="">
            <frame src="frame/top.html">
            <frameset cols="15%,*">
                <frame src="frame/left.html">
                <frameset rows="80%">
                    <frame src="frame/main.html">
                    <frame src="frame/botton.html">
                </frameset>
            </frameset>

        </frameset>
    </body>
</html>

一些展示结果

frameset 编写的有问题，但因为淘汰了所以了解以下

CSS：

 CSS：层叠式样式表：用于控制网页样式并且将样式信息与网页内容分离的一种标记行语言

一、语法规则

二、CSS与HTML结合的方式

1、内部样式表

  <!--内部样式表-->
    <style type="text/css">
        p{
            color:red;
        }
        .f20{
            font-size:20px;
        }

    </style>

在<style>标签中写CSS样式内容

2、嵌入式样式表

 <p><span style="font-size:100px;font-weight:boloder;">HELLO</span></p>

在一个标签里使用

3、外部样式表

通过link标签来使用

<link rel="stylesheet" href="css/demo01.css">

三、分类

        1）标签样式表：p{color:red;} 表示p标签的样式都为红色
        2）类样式：.f20{font-size:20px;} 前面有个.
            <p class="f20">段落三</p>
        3）id样式： #p4{}  以#开头 id属性在这个html文档中尽量唯一
        4）组合样式：div p{color:blue;}  div .f32{}

常用：

    border:边框
    width:宽度
    height:厚度
    background-color:边框内部背景颜色
    color:字体颜色
    font-size:20px 字体大小
    .......

JS：

连接外部的JS文件：

<script type="text/javascript" src="js.fruit.js"></script>

其中src中的值为js文件的地址

原文链接：https://blog.csdn.net/weixin_42196338/article/details/124929088