day1_html

1前端技术

直观有趣支持声音视频等多媒体需要美术功底支持

在哪运行?

浏览器

1 前端技术的运行工具由浏览器直接运行

2 浏览器内核 google内核火狐内核苹果内核 IE内核

html css javascript 处理浏览器兼容性

3 多进程+多线程的组合程序占内存

每个页面都是独立的进程

2前端开发工具

webstrom 需要破解(预置插件库)

vscode 纯免费 (文本编辑类插件库丰富自己装)

安装直接下一步即可

安装完需要安装插件

liveServer 页面的测试服务器

选装

之后建立项目建立页面文件写好之后用liveserver运行查看

注意:

记得保存文件或者开启自动保存

3html介绍

html管页面中有啥非常简单和直观的语言

html 超文本标记语言

超文本除了文本外还有声音视频图片链接

标记语言以标签/标记形式体现不同的标签有不同的功能

<!DOCTYPE html>
<!-- html版本描述文件 html5版本   -->
<html lang="en">
<!-- html标签可以包含属性 不同的标签有不同的属性  lang="en" 适配的语言  -->
<head>
    <!-- 头部描述标签   -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta 元数据标签 作者 时间....   -->
    <title>页面标题</title>
</head>
<body>
    <!-- 
    html中标签分两类
    单标签    独立存在 没有结束标签 有特殊的显示效果或功能
    双标签    <标签>标签体</标签>   跟结构有关 可以嵌套文字或其他标签
    
    -->


    <!-- 页面主体部分  显示各种页面元素的部分  -->
    我的页面123
</body>
</html>

1什么是html标签

<英文> 就是标签

2标签含有属性不同的标签有不同的属性

<标签属性='属性值' >

3有两种标签

单标签 <标签> 独立存在没有结束标签有特殊的显示效果或功能
双标签 <标签>标签体</标签> 跟结构有关可以嵌套文字或其他标签

4html常用标签

1排版标签

h1-h6 标题标签块元素改字号加粗
p 段落标签块上下间距
div 块元素

html5版本后做了扩展兼容老版本
b/strong 加粗标签
u 下划线
em 斜体

br 换行
hr 分割线

列表标签
有序列表

新闻1....

新闻2....

新闻3....

无序列表

新闻1....

新闻2....

新闻3....

新闻4....

自定义列表

标题: 内容; 内容
震惊8旬老汉半夜尽然钻入儿媳妇房间: 给孙子送尿布

注意:标签可以嵌套使用包含关系(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>
    我的页面<br>我的第二行
    <!-- 
         显示特征
         块元素      从左到右 独自占一样
         行内元素    内容有多大就占多宽
    
        h1-h6 标题标签  块元素      改字号 加粗
        p     段落标签  块  上下间距
        div   块元素

        html5版本后 做了扩展 兼容老版本 
        b/strong     加粗标签
        u            下划线
        em           斜体

        br     换行
        hr     分割线
        
        列表标签
        有序列表
         <ol>
            <li>新闻1....</li>
            <li>新闻2....</li>
            <li>新闻3....</li>
        </ol>
        无序列表
         <ul>
            <li>新闻1....</li>
            <li>新闻2....</li>
            <li>新闻3....</li>
            <li>新闻4....</li>
        </ul>
        自定义列表
        <dl>
            <dt>标题</dt>
            <dd>内容</dd>
            <dd>内容</dd>
            <dt>震惊8旬老汉半夜尽然钻入儿媳妇房间</dt>
            <dd>给孙子送尿布</dd>
        </dl>
        
        注意:标签可以嵌套使用 包含关系(html的嵌套)

    -->
    <h1>我叫丁真</h1>
    <h3>我叫丁真</h3>
    <h6>我叫丁真</h6>

    <h1>悯农</h1>
    <p>锄禾日当午</p> 
    <p>汗滴禾下土</p> 
    <div>谁知盘中餐</div>
    <div>丽丽姐辛苦</div>

    床前<b>明</b><strong>月光</strong> <b><em><u>地上</u></em></b><em>鞋</em>一双
    <hr>
    <ol type="I">
        <li>新闻1....</li>
        <li>新闻2....</li>
        <li>新闻3....</li>
        <li>新闻4....</li>
    </ol>
    <ul>
        <li>新闻1....</li>
        <li>新闻2....</li>
        <li>新闻3....</li>
        <li>新闻4....</li>
    </ul>

    <dl>
        <dt>标题</dt>
        <dd>内容</dd>
        <dd>内容</dd>
        <dt>震惊8旬老汉半夜尽然钻入儿媳妇房间</dt>
        <dd>给孙子送尿布</dd>
    </dl>

</body>
</html>

2超链接标签

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    跳转到的地址
            target  跳转方式
                    _self  当前页面
                    _blank 新开页面
            
            跳转地址的格式:
            1.相对路径      ./当前目录   ../上级目录
            2.相对根路径     / 从根开始替换路径  只需要填目标文件地址
            3.绝对路径       跨服务器访问使用 

        a标签功能  切换浏览器地址栏


本地文件协议(只能访问本机)
file:///  D:/webFolder/day1_html/test2/3a%E6%A0%87%E7%AD%BE.html

超文本传输协议 (跨主机访问)
http://  127.0.0.1    :      5500                                   /day1_html/test2/3a%E6%A0%87%E7%AD%BE.html
协议     ip地址           端口号(应用程序绑定)只开放部分资源文件        开放的资源


https://www.baidu.com/


www.baidu.com  域名  dns解析 IP  221.114.23.43

省略端口号
http       80
https      443

http       传输格式上没有区别
https      传输层 需要配置加密证书 tls/ssl


http://www.customs.gov.cn/

-->
    <a href="./../../test/1html介绍.html" >看看老汉在干什么</a><br>
    <a href="https://www.baidu.com/" >看看老汉在干什么2</a>

</body>
</html>

注意:页面访问通常需要使用http协议

协议URL规则:

http://  127.0.0.1    :      5500      /day1_html/test2/3a%E6%A0%87%E7%AD%BE.html   ?  key=value & key=value
协议      地址                端口号        资源地址                                       查询参数

3图片标签

引入当前项目中的图片或者网络中的其他图片在自己的页面中显示

<!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>
    <!-- 
    img 图片
    src 引入图片的地址
        跳转地址的格式:
            1.相对路径      ./当前目录   ../上级目录
            2.相对根路径     / 从根开始替换路径  只需要填目标文件地址
            3.绝对路径       跨服务器访问使用 

    alt   显示不出来时的文字说明
    title 图片附加信息说明
    单标签   行内元素

    经常与a标签搭配使用
    a标签中套图片  美化图片
    
    -->
    <a href="https://www.baidu.com"><img src="https://www.baidu.com/img/flexible/logo/pc/result.png"
        alt="这是一张图片" title="图片信息"></a>
</body>
</html>

4表格标签

在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>
    <!-- 
    table 表格
      属性:  border 边框

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

    tr       行
    td       单元格
    th       列头   (加粗 居中)

      属性:  rowspan 跨行
             colspan 跨列
             align   对齐方式 左中右

    
    -->

    <!-- 表格标签 -->
    <table border="1">

        <caption>人员信息表</caption>
        <thead>
            <tr>
                <!-- 单元格 -->
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>住址</th>
            </tr>
        </thead>


        <!-- 行 -->
         <tbody>

        
        <tr>
            <!-- 单元格 -->
            <td align="center">1</td>
            <td>小明</td>
            <td rowspan="2">25</td>
            <td>枫杨街</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td align="center">2</td>
            <td>小黑</td>
            
            <td>枫杨街2222222222222222222222222222222222222222222</td>
        </tr>
    </tbody>
    <tfoot>

    </tfoot>
        <tr>
            <!-- 单元格 -->
            <td align="center" colspan="4">联系电话:13334433444</td>

        </tr>
    </table>





</body>
</html>

5表单标签

与用户做输入选择的交互

收集用户填入/选择的数据并发送给服务端

表单标签的必要设置

1.from标签
2.设置form action 提交地址  method 提交方式
3.form里设置表单元素标签 输入框/选择框
4.表单元素 需要有name属性 配置为key  最终传递时 会把输入的值搭配成键值对?wd=rose
5.需要提交按钮 出发提交动作

<!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 提交的地址  主要使用相对路径/相对根路径
            method 提交方式    get/post  默认get
                              get  参数出现在url中
                                   参数只允许ascII字符 自动url转码
                                   长度限制4k字符
                                   参数可以保存为书签 存入历史记录

                              post 参数隐藏在请求体中
                                   可以出现特殊字符
                                   没有上限 字节/字符都支持
                                   参数不可以保存为书签 不存入历史记录
                                   比较隐蔽
            enctype体现到请求头
            Content-Type: application/x-www-form-urlencoded    url编码格式 传字符
            Content-Type: multipart/form-data                  分段文件    传字节

    -->
    <form action="/myserver" method="post" enctype="multipart/form-data">
        <!-- 输入框 选择框 提交按钮等  -->
        用户名:<input type="text" name="wd"/><br>
        <input type="submit" value="注册">
    </form>

    <!-- 
    1.from标签
    2.设置form action 提交地址  method 提交方式
    3.form里设置表单元素标签 输入框/选择框
    4.表单元素 需要有name属性 配置为key  最终传递时 会把输入的值搭配成键值对
        ?wd=rose
    5.需要提交按钮 出发提交动作    
    
    
    -->



</body>
</html>

get与post的区别

get  参数出现在url中
     参数只允许ascII字符 自动url转码
     长度限制4k字符
     参数可以保存为书签 存入历史记录

post 参数隐藏在请求体中
     可以出现特殊字符
     没有上限 字节/字符都支持
     参数不可以保存为书签 不存入历史记录
     比较隐蔽

6常用表单元素

    输入类
    输入框/密码框

    文本输入框
    <input type="text"/>
            maxlength  最大长度
            value      输入框的值
            readonly   只读
            disabled   禁用
            placeholder 输入提示信息 没内容时显示

    密码框
    <input type="password"/>
            maxlength  最大长度
            value      输入框的值
            readonly   只读
            disabled   禁用
            placeholder 输入提示信息 没内容时显示

    选择类
    单选按钮
    <input  type="radio">
            通过name属性 分组 
            value      当前选项的值
            checked    默认选中

    多选按钮
    <input  type="checkbox">
            通过name属性 分组 
            value      当前选项的值
            checked    默认选中

    下拉列表
            <select name="area">
                <option value="001">中国</option>
                <option value="002">美国</option>
                <option selected value="003">泰国</option>
            </select>
            value 选项值
            selected 默认选中

    多行文本
        <textarea name="remark"></textarea>

表单元素设计的时间比较早标签属性相同功能会不一样需要自己写去熟悉

<!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>
    <!-- 
    输入类
    输入框/密码框

    文本输入框
    <input type="text"/>
            maxlength  最大长度
            value      输入框的值
            readonly   只读
            disabled   禁用
            placeholder 输入提示信息 没内容时显示

    密码框
    <input type="password"/>
            maxlength  最大长度
            value      输入框的值
            readonly   只读
            disabled   禁用
            placeholder 输入提示信息 没内容时显示

    选择类
    单选按钮
    <input  type="radio">
            通过name属性 分组 
            value      当前选项的值
            checked    默认选中

    多选按钮
    <input  type="checkbox">
            通过name属性 分组 
            value      当前选项的值
            checked    默认选中

    下拉列表
            <select name="area">
                <option value="001">中国</option>
                <option value="002">美国</option>
                <option selected value="003">泰国</option>
            </select>
            value 选项值
            selected 默认选中

    多行文本
        <textarea name="remark"></textarea>            
    
    -->

    <form action="/registServer">
        用户名:<input type="text" maxlength="5" readonly placeholder="username" /><br>
        密码:<input type="password" maxlength="5" placeholder="password"/><br>
        性别:<input name="gender" value="1"  type="radio">男<input name="gender" checked value="2" type="radio">女<br>
        
        兴趣: <input name="hobby" checked type="checkbox" value="1">java
             <input name="hobby" type="checkbox" value="2">sql
             <input name="hobby" checked type="checkbox" value="3">html<br>
        
        国籍:<select name="area">
                <option selected disabled >------请选择---------</option>

                <option value="001">中国</option>
                <option value="002">美国</option>
                <option value="003">泰国</option>
            </select><br>
        备注:<textarea name="remark"></textarea>  <br>  

        <input type="submit" value="注册">

    </form>



</body>
</html>

7转义符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./imgs/ma.png" type="image/x-icon">

</head>
<body>
    
    我今天学了html<br>
    <!-- 浏览器会读取和解析html标签与属性
         如果有效果 显示 没效果忽略  
         1.允许自定义标签 自定义属性 配合js可以做定义标签的解析
         2.为了避免与html解析规则冲突 设定了转义符
           &xxx;
            &lt;  小于
            &gt;  大于
            &quot;  引号
            &copy;  公司符号
            &amp;   &符号

            &nbsp;  小空格
            &ensp;  中空格
            &emsp;  大空格

        尽量不要用空格转义符做对其 用css
    -->
    a&lt;b&nbsp;&ensp;&emsp;c&gt;d<br>
    iam


 


</body>
</html>

8视频标签

   <video width="320" height="240" controls="controls" autoplay="autoplay">
        <source src="./imgs/movie.mp4" type="video/mp4" />
      </video>

9页面图标

 <link rel="shortcut icon" href="./imgs/ma.png" type="image/x-icon">

作业任务:

把注册页面套入table中熟悉表单标签表单元素表格标签的基本使用

posted @ 2025-07-25 18:36 小胡coding 阅读(17) 评论(0) 收藏举报

刷新页面返回顶部

hulixiangcoding

day1_html

day1_html

1前端技术

2前端开发工具

3html介绍

1什么是html标签

2标签含有属性不同的标签有不同的属性

3有两种标签

4html常用标签

1排版标签

2超链接标签

3图片标签

4表格标签

5表单标签

6常用表单元素

7转义符

8视频标签

9页面图标

公告

hulixiangcoding

day1_html

day1_html

1前端技术

2前端开发工具

3html介绍

1什么是html标签

2标签含有属性 不同的标签有不同的属性

3有两种标签

4html常用标签

1排版标签

2超链接标签

3图片标签

4表格标签

5表单标签

6常用表单元素

7转义符

8视频标签

9页面图标

公告

2标签含有属性不同的标签有不同的属性