自学嵌入式 day37 HTML

发布于:2025-08-03 ⋅ 阅读:(15) ⋅ 点赞:(0)

HTML:超文本标记语言
    HyperText Markup Language
    一种用于创建网页的标准标记语言
    HTML 运行在浏览器上,由浏览器来解析。

https://www.runoob.com/html/html-tutorial.html

1.格式
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8"> 
        <title>中文测试。。。。</title>
    </head>
    <body>
        这里是测试body测试内容。。。
    </body>
</html><!DOCTYPE html> 声明为 HTML5(最新的HTML标准)文档 告诉浏览器按照标准模式进行解析渲染页面,有助于浏览器中正确显示网页
    <html> </html>元素是 HTML 页面的根元素
    <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
    <title> 元素描述了文档的标题
    <body> 元素包含了可见的页面内容

2.标签 在body内
    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
    HTML 标签是由尖括号包围的关键词,比如 <html>
    HTML 标签大部分是成对出现的,比如 <b> 和 </b>,还有少部分为单标签,比如<hr>
    标签对中的第一个标签是开始标签,第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签
    
    
    <h1></h1>双标签 标题 ,加粗,换行  1-6 ---》小
    <p></p> 双标签  段落,有换行功效
    <hr> 单标签  左到右分割符(横线)
    <!--    -->注释

3.元素的属性
    给元素提供附件信息,大部分的元素属性
    属性一般描述于开始标签
    属性总是以"名称=值对"的形式出现,比如:name="value"。
    语法:<标签 属性名称=参数1>
    1) bgcolor ,body的属性设置网页的背景色
    <body bgcolor="ff1234">
    2)background  body的属性设置网页的背景图片
    
    3)align属性 值: left,right,center
4.文本元素属性
    b 元素 <b>内容</b> 加粗
    br 换行<br> 
    i元素, 字体倾斜<i></i>
    del元素 删除文字<del></del>
    strong  强调一段文字,效果类似 b标签
    ins元素,插入文字(下划线<ins></ins>)
    small元素, 超小字体<small></small>
    sub 下标<sub></sub>
    sup  上标<sup></sup>
    <br>h<sub>2</sub>0
            <br>100m<sup>2</sup>

5、img 单标签
    <img src="url" alt="some_text">
    src 图像来源
    alt 如果不能正确打开,显示的替换文字
    width, height
    <img src="abc.jpg" alt="美女" width="50" height="60"> 
    <img src="abc.jpg" alt="美女" width="50%" height="200%">
    百分比是相对于网页而言的, 高度百分比无效的

    &nbsp  空格

6、超链接
    5种形式
    基本语法
    <a href="url">链接文本</a>
    1.链接外部网站
    2.链接本地文件
    3.图片链接
    4.电子邮件链接打开电子邮件
    5.下载文件链接

<a href="http://www.baidu.com">baidu</a>
        <br><a href="1.html">链接文件</a>
        <br><a href="1.html"><img src="abc.jpg"></a>
        <br><a href="mailto:123@13.com">发送邮件</a>
        <br><a href="abc.jpg">下载</a>
        
    上面的方法在打开新网页时,老的网页会关闭
    target 属性
    _self :当前位置打开 默认值
    _blank 新窗口中打开
    <a href="http://www.baidu.com" target="_blank">baidu</a>


    
7、列表
    1)有序列表,
    2)无需序列
    3)自定义列表
    
    1)无序列表 前面无数字
    <ul type=square>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
    </ul>
    type属性 文字最前面的符号
    disc 黑色实心圆
    circle 白色空心圆
    square 黑色方块
    
    2)有序列表,前面有数字

    <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
    </ol>
    其中可以放文字,图片,或链接
    有type属性,设置排序使用什么数字
        a 表示小写英文字母编号
        A 表示大写英文字母编号
        i 表示小写罗马数字编号
        I 表示大写罗马数字编号
        1 表示数字编号(默认)

8、表格的构成,
    table,外框
    tr 行
    td 列
    <table border="1">
        <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
        <tr><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>
        3行 3列
    表格的属性
     border 边框粗细
     th,是tr的属性,列标题,自动居中,加粗(和tr用法一样)
     colspan,横向合并单元格,需要 整形参数
        <tr><th colspan="3">name</th></tr> 
        
    表格的合并
    rowspan ,列项合并,整数参数

    
9、表单    传递参数,数据
   HTML 表单用于收集用户的输入信息。
   HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
    <form>
    </form>
    属性 action,指定表单发送的地址(表单转向的网页等)
    属性 method 发送的方式 get,post 
        get方法 数据会附加到url的后面传递给服务器 默认
        post,将数据包大包发给服务器,等候服务器来读取 
    表单中重要的字元素 input button 
    
    <form method="get" action="">
    username: <input type="text" name="用户名"><br>
    passward: <input type="text" name="密码">
    </form>
10、input元素,(输入框)他是表单的一个字属性
    指定表单中的内容项,比如输入内容的文本框
    可以指定表单属性,也可以放在表单的外面。
    input元素的属性:
        type,指定输入框的类型,
                text 单行文本,
                password 密码,
                submit 提交按钮,
                radio 单选按钮
                reset 重置按键,
                image 图片式按键
                    <input type="image" src="1.jpg" alt="图标" width="48" height="48"
                    点击图片会上交点击的坐标(get方式url中可以看到)
                
         
         name:名称,输入内容识别名称,传递参数时候的参数名称
         value: 默认值,输入框默认填入的内容,
         maxlength,指定最大长度maxlength="3"
         placeholder,设置提示信息的。
         required:表示内容必须填写,不然不能提交。
         
    <form action="xxx.html" method="get" align="center">
        username: <input type="text" name="用户名" required><br>
        passward: <input type="password" name="密码" maxlength="3" placeholder="你猜"><br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <input type="button" value="按键">
        <input type="image" src="img_submit.gif" alt="图标" width="48" height="48">    
    </form>
 


网站公告

今日签到

点亮在社区的每一天
去签到