HTML

1.浏览器相关知识

常用浏览器

按内核分 html css javascript 解析器并显示到浏览器中

1 谷歌内核 chrome edge 测试和使用

2 Mozilla firefox 火狐浏览器

3 苹果公司 safari

4 IE内核 (已废弃)

国内浏览器没有自己的内核

javascript ——》 TypeScript

2.html 超文本标记语言

超文本展现形式更丰富有图片声音视频链接等非文本内容

标记语言 html语法以标记（标签）来书写

html标签语法尖括号中套因为浏览器会解析标签不是标签的部分会显示出来


<html>

<head>
    </head>

<body>
       hello html!!!!!
    </body>
</html>

3.开发工具vscode

安装软件直接一直下一步到结束

偏向文本编辑型开发工具小运行快插件需要手动安装

![Snipaste_2024-11-08_10-33-20](https://www.neet0316.com/wp-content/uploads/2025/12/Snipaste_2024-11-08_10-33-20.png

4.通过vscode编写html

![image-20241108104545805](https://www.neet0316.com/wp-content/uploads/2025/12/Snipaste_2024-11-08_09-58-25.png

![image-20241108104621252](https://www.neet0316.com/wp-content/uploads/2025/12/Snipaste_2024-11-08_10-33-20-1.png

<!DOCTYPE html> <!-- 当前使用的html版本 html5  -->
<html lang="zh-cn"> <!-- 标签的属性  lang="en" 可选配置 使用的语言 -->
<head>
    <!-- html描述信息 -->
    <meta charset="UTF-8"> <!-- meta 元数据标签 做html的说明设置  字符编码 作者 日期等等  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>鸡你一下</title> <!-- 网页标题  -->
</head>
<body>
    <!-- 页面主体部分  html注释标签 html中的隐藏元素  -->
    hell htmle
</body>
</html>

5.html语法规则

html中可以使用的语法结构：

1.html标签

   标签  <英文>   
         两种标签  单标签（自结束标签） <英文>                自己具有特殊的功能 中间不能嵌套文本
                  <meta charset="UTF-8">

                  双标签             <英文>标签体</英文>    双标签有标签体 可以包裹其他的标签和文本 

<title>Document</title>

2.标签属性

  属性 <英文 key=value >  每个标签有不同的属性 和属性值    
                         <meta charset="UTF-8">  网页字符编码
                         <html lang="en">        html默认语言

3.文本

    文本  纯文本部分 html不会解析 直接显示到浏览器中

         特殊文本 转义符
         &英文;
         &nbsp;  小空格
         &ensp;  中空格
         &emsp;  大空格
         &lt;    小于号
         &gt;    大于号
         &copy;  公司符号
         &quot;  引号

注意:

html中排版规则与普通文本不同:

1.不识别/r/n 需要br标签换行
2.对空格解析 多个空格识别为一个空格 需要使用转义符
3.html中如果出现错误标签/属性 不会报错 只是没有显示效果
  例如: 1<acb   4>2<br>

6排版标签

1基本排版格式

 块block           独占一行
 行内inline        根据内容决定大小 从左到右排列

示例:

 <!-- html中自带格式的标签 -->

<h5>标题标签</h5> 
    <!--标题标签 h1-h6 字号逐渐变小   块   带行间距 字体加粗  -->

<p>我是菜小鸡</p>
    <!--段落标签 p   块   带行间距  -->

<div>我是菜小鸡</div>
    <!--块标签   块   -->
    <!--行内元素      -->
    我是<b>菜小<em><u>鸡</u></em></b>  我是<span>菜小鸡</span><br>  
    我是<b>菜小鸡</b> 我是<strong>菜小鸡</strong>
    <!--b       加粗  em 斜体  u  下划线  span纯块 配合css js 定位元素使用    \
        strong  加粗

        html版本问题 单字母的标签和属性

    -->

注意:

html中因为版本向下兼容所有会有多个标签同一显示效果的现象

2.列表标签

排列文字使用

    ul 无序列表标签  
       属性type="square"  该标记样式
    li 列表项

    <ul type="square">

<li>尔滨装卸行李温柔得像放鸡蛋</li>

<li>郑钦文称不与选手交朋友 李娜回应</li>

<li>快递小哥在仓库遇到小猪包裹</li>

<li>王俊凯发文卡点为王源庆生</li>
    </ul>

    ol 有序列表

    <ol type="I" >

<li>尔滨装卸行李温柔得像放鸡蛋</li>

<li>郑钦文称不与选手交朋友 李娜回应</li>

<li>快递小哥在仓库遇到小猪包裹</li>

<li>王俊凯发文卡点为王源庆生</li>
    </ol>

    dl  自定义列表
    dt  列表标题
    dd  列表内容

<dl>

<dt>自定义标题</dt>

<dd>自定义内容</dd>

<dt>震惊80老翁 晚上劲做出这种事</dt>

<dd>晚上掉厕所里了</dd>
    </dl>

7图片标签

img 网页中显示图片

img     图片标签  行内元素 单标签
        width  宽
        height 高
        title  鼠标悬停时 会显示说明
        alt    图片显示不出来时 显示说明

<img src="/imgs/niu.jpg" alt="这是一个美女图片" title="这是我的老婆" width="200px" height="100px">

注意:图片时行内标签可以与文字一起排列

8超链接标签

> 浏览器地址栏中填的是http协议链接

![image-20241108152721877](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241108152721877.png

![image-20241108152749001](https://www.neet0316.com/wp-content/uploads/2025/12/image-20241108152749001.png

域名与ip地址间会通过dns域名解析服务做自动转换(了解即可)

> http协议链接规则(*):

http://   127.0.0.1    :       5500                /day1_html/6%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html
                                                                     ? key=value &amp; key=value
协议      ip地址/域名       端口号 默认端口号可以不填     资源地址           请求参数

> a标签超链接(*) > > 做页面跳转根据a标签中 href属性填入的值替换浏览器的地址栏

href属性  链接地址
       1和2 是在当前服务器下替换路径
       1.相对路径   自己与目标文件之间经过的路径 (通用性强)
                   ./  当前目录 可以不写   ../ 退出一级目录
                   <a href="/5%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html">查看其他网页</a> 

       2.相对根路径  直接填目标文件的路径 从/开始替换
                   <a href="/day1_html/5%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html">查看其他网页</a>

       3.绝对路径   从协议开始 替换完整路径 
                  通常用来访问外部资源
                  <a href="https://www.baidu.com/s?wd=帅哥">看拽哥</a>

target属性  链接打开方式
      _self   默认值  在当前页面打开
      _blank         在新页面打开

a标签做锚点(在当前页面上下位置跳转)

a标签可以做锚点
         在当前页面上下位置跳转
         #     到顶部
         ###   不跳转  保留a标签样式使用
         #id值 跳转到指定的元素为止     

     <a href="/">回到顶部</a>
     <a href="/#title1">回到小说</a>
     <a href="/###">不跳转</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>
    <!-- 超链接 
    a标签     根据href中的地址 替换到浏览器的地址栏
    href 属性  链接地址
              当前服务器内部跳转
              1.相对路径    自己和目标之间经过的路径  ./   /xxx  ../
              2.相对根路径  只需要知道目标文件在哪里
              访问外部网站
              3.绝对路径    地址端口开始替换 访问其他服务器的内容

        本地文件协议 本机查找文件的规则
        file:///     D:/develop/webFolder    /day1_html/6%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html
        1.相对路径
        2.绝对路径

        通过http协议规则访问
        http协议链接格式

        http://   127.0.0.1    :       5500                /day1_html/6%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html
                                                                     ? key=value & key=value
        协议     ip地址/域名           端口号 默认端口号可以不填      资源地址       请求参数

        //www.baidu.com 域名   IP地址  0.0.0.0 --- 255.255.255.255  112.212.114.56
        //   域名通过dns解析 解析到ip地址

        http协议 两种配置策略 
        https  443   加密传输    需要ca认证证书
        http   80    非加密传输  不需要

         target 属性  链接打开方式
                      _self   当前网页打开
                      _blank  新网页打开

        a标签可以做锚点
         在当前页面上下位置跳转
         #     到顶部
         ###   不跳转  保留a标签样式使用
         #id值 跳转到指定的元素为止
    -->
     <a href="/5%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html">查看其他网页</a>
     <a href="/day1_html/5%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html">查看其他网页</a>
     <a href="https://www.baidu.com" target="_blank">查看百度</a>
     <a href="https://www.baidu.com/s?wd=帅哥">看拽哥</a>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <h1 id="title1">小说</h1>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <h1 id="title2">图片</h1>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <a href="/###">回到顶部</a>
     <a href="/#title1">回到小说</a>
</body>
</html>

9表格标签

table 画表格

1.显示数据表格

2.可以通过talbe对齐元素做小页面布局

    table  表格标签  
            border="1" 边框属性

    tr     行
    td     单元格
           align="right" 对齐方式  左中右 默认左
           rowspan="3"   跨行
           colspan="3"   跨列

    th     单元格(加粗居中 一般做列头)
    caption 表名

    thead   头部区域
    tbody   主体数据区域
    tfoot   尾部区域

表格实例画表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>

    <!-- 
    table  画表格
           1.显示数据表格
           2.可以通过talbe对齐元素 做小页面布局

    table  表格标签  
            border="1" 边框属性

    tr     行
    td     单元格
           align="right" 对齐方式  左中右 默认左
           rowspan="3"   跨行
           colspan="3"   跨列

    th     单元格(加粗居中 一般做列头)
    caption 表名

    thead   头部区域
    tbody   主体数据区域
    tfoot   尾部区域

    注意: 格子对齐 好看
    -->

    <table border="1">

<caption>
            学生信息表
        </caption>

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>住址</th>
            </tr>
        </thead>

<tbody>

<tr>

<td>001</td>

<td>小李子</td>
                <td rowspan="3">住在凤阳大街</td>
            </tr>

<tr>

<td>002</td>
                <td align="right">小李子2</td>

            </tr>

<tr>

<td>003</td>

<td>小李子3</td>

            </tr>
        </tbody>

<tfoot>

<tr>
                <td colspan="3" align="center" >联系电话:123321123321</td>

            </tr>
        </tfoot>
        <!-- row 行  column 列  -->

    </table>
</body>
</html>

10表单标签

收集用户信息并向服务端发送这种元素称为表单

    <form action="/myserver">
    <!-- 表单元素 输入框 选择框 .... -->
        <input name="username" type="text"/>
    <!-- 提交按钮 .... -->
        <input type="submit">
    </form>

表单注意点:

    1.form标签
    2.form标签中包含表单元素 输入框 选择框
    3.form上设置参数  
                action="/myserver" 提交的服务端地址
    4.需要提交按钮 触发提交动作
    5.表单元素上 需要配置name属性 才能发送参数 key=value 的键值对

表单的属性设置:

 action="/myserver" 服务器的地址

method="get" 提交方式属性
    http协议中定义的提交数据方式
           (默认值)
    get    发送数据时 出现url中
           字符长度有限制 4k
           字符形式 ascII字符 
           参数可以存进历史记录
           可以存为书签 
           处理较快 

    post   发送数据时 不出现在url中 隐藏在请求体中
           长度无限制 
           可以用字符  可以用字节
           参数不能存进历史记录
           不能存为书签 
           处理较慢

enctype属性

    application/x-www-form-urlencoded   url编码格式  字符  (默认值)
    multipart/form-data                 分段文件     字节

11常用表单元素

        1输入类
         输入框
          <input name="username" type="text"/><br>
         密码框
          <input name="pwd" type="password"/><br>
        2选择类
         单选按钮
          <input type="radio"/><br>
         多选按钮
          <input type="checkbox"/><br>
        3扩展类
         下拉列表
          <select>

<option>北京</option>

<option>上海</option>

<option>深镇</option>
          </select><br>
         多行文本
         <textarea></textarea><br>

12使用html标签做注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>
<body>
    <form action="/myserver" method="get" enctype="application/x-www-form-urlencoded">

<table>

<tr>
                <td align="right">用户名:</td>
                <!-- 
                placeholder 提示信息
                value       默认值
                readonly    只读
                disabled    禁用
                -->

<td><input name="username" placeholder="username" value="aaaa" disabled type="text"/></td>
            </tr>

<tr>
                <td align="right">密&emsp;码:</td>

<td><input name="pwd" placeholder="pass" type="password"/></td>
            </tr>

<tr>
                <td align="right">性&emsp;别:</td>

<td>
                     <!-- 
                    name 提交的key  分组
                    value       选项的值
                    checked     默认选中
                    -->
                    <input name="gender"  type="radio" value="1">男
                    <input name="gender" checked type="radio" value="2">女
                </td>
            </tr>

<tr>
                <td align="right">爱&emsp;好:</td>

<td>
                     <!-- 
                    name 提交的key  分组
                    value       选项的值
                    checked     默认选中
                    -->
                    <input name="hobby" checked  type="checkbox" value="1">男玩家
                    <input name="hobby"  checked type="checkbox" value="2">女玩家
                    <input name="hobby"  type="checkbox" value="3">宠物玩家
                </td>
            </tr>

<tr>
                <td align="right">城&emsp;市:</td>

<td>
                     <!-- 
                        value     配置选项值
                        selected  默认选中
                        multiple  多选
                    -->
                    <!-- 下拉列表 -->
                    <select name="city">
                        <!-- 配置默认选项 但是不能选 -->
                        <option selected disabled >-----请选择-----</option>
                        <!-- 列表项 -->
                        <option value="001">北京</option>
                        <option value="002">上海</option>
                        <option value="003">深圳</option>
                    </select>

                </td>
            </tr>

<tr>
                <td align="right">备&emsp;注:</td>

<td>
                     <!-- 
                        rows="5"    默认行
                        cols="60"   默认列
                    -->
                    <textarea rows="5" cols="60"></textarea>
                </td>
            </tr>

<tr>
                <td align="right"></td>
                <!-- 
                type="submit"  提交按钮
                type="reset"   重置按钮
                type="button"  自定义按钮
                -->

<td><input type="submit"/>
                    <input type="reset"/>
                    <input type="button" value="测试按钮"/></td>
            </tr>

        </table>

    </form>

    <!--  视频 音频 和图片 规则基本相同  -->
    <video width="320" height="240" controls>
        <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
        <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
      </video>

</body>
</html>