HTML（超文本标记语言）

最新推荐文章于 2024-06-18 13:20:32 发布

明别

最新推荐文章于 2024-06-18 13:20:32 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/DZiXin/article/details/108063876

版权

Web前端

– HTML：超文本标记语言，展示页面内容（ .html .htm -> 网页）
– CSS：美化页面
– JavaScript：动态页面效果

HTML(超文本标记语言)

标签：大小写不敏感，有容错性
预定义标签：有规范，已经定义好的标签

<a 属性=“属性值”>标签体 (/a) [() 代替<>]
<a 属性=“属性值” /> 自闭和标签，没有标签体

<!-- html文档类型, 版本
     DOCTYPE: 约束, 规定了html的预定义标签
 -->
<!DOCTYPE html>
<!-- 根标签html: 最外层的标签, 根标签只能有一个 -->
<html>
<!-- head标签: html文件头 -->
<head>
    <!-- meta: 页面元信息, 看不见的配置
            charset: 字符集, 默认ISO8859-1
            屏幕分辨率信息...
     -->
    <meta charset="UTF-8">
    <!-- title: 页面标题 -->
    <title>第一个HTML文件</title>
    <!--  引入外部的文件信息, 例如 css js  -->
</head>
<!-- 页面主体内容: 文本, 超链接, 图片, 视频, 表格, 列表.... -->
<body>
<!-- 空格没用 -->
    Hello World!

    你好, 世界!
</body>
</html>

文本标签

标题标签：h1~h6，数字越大，字体越小，标题自带换行

<!--  1.标题标签  -->
<h1>1级标题</h1><h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!-- 和普通文本完全一样 -->
<h7>7级标题不存在</h7>普通文本

段落标签：自带换行，且有留白
换行：br

<!-- 2.段落标签, br:换行符 -->
<p>
    超级文本标记语言
    <br/>
    超级文本标记语言
</p>
<p>
    超级文本标记语言
</p>

字体样式标签：strong、b、u、i

<!-- 3.样式标签 -->
<!-- 加粗 -->
<strong>文本加粗</strong>
<!-- 加粗 -->
<b>b标签</b>
<!-- 倾斜 -->
<i>i标签</i>
<!-- 下划线 -->
<u>u标签</u>

字体标签：font(size color)

<!-- 4.字体标签, 控制大小和颜色
       控制大小的属性: size 1~7 默认是3
       控制颜色的属性: color
                    英文单词, #16进制数, #简写16进制
 -->
<br/>
<font size="1" color="red">font标签1</font><br/>
<font size="2" color="blue">font标签2</font><br/>
<font size="3" color="#ffff00">font标签3</font><br/>
<font size="4" color="0,255,0">font标签4</font><br/>
<font size="5" color="#f0f">font标签5</font><br/>
<font size="6" color="#abcdef">font标签6</font><br/>

分割线：hr(size noshade width align)

<!-- 5.分割线
        size: 高度
        noshade: 实心, 属性名和属性值一致, 可以简写
        width: 宽度 px:像素值, 百分比[占父标签的百分比]
        align: 对齐方式 center[默认值center] left right
 -->
<hr size="5" noshade width="50%" align="left" />

多媒体标签

图片：img(src width height title alt)

    <!-- src: 图片路径
         width: 像素值  百分比
         height: 像素值 百分比
         width 和 height如果只设置一个, 另一个值按照图片比例缩放
         alt: 图片不能正常加载时显示的文本
         title: 标题, 鼠标悬停, 图片提示的文本
     -->
    <img src="img/1.jpg" height="200px"
         alt="普通文本" title="标题"/>

视频：video(src width height title controls autoplay loop)

    <!-- 视频标签 -->
<!--    <video title="视频标题" src="img/vide.mp4" width="300px"-->
<!--        controls autoplay loop />-->
    <video controls="controls" width="300px" autoplay="autoplay" loop="loop">
        <source src="img/vide.mp4"/>
        <source src="img/video.mp4"/>
    </video>

音频：audio(src controls autoplay loop)

    <!--  音频, 也可以使用source资源  -->
    <audio src="img/audio.mp3" controls autoplay loop></audio>

列表标签
列表项: li

有序列表: ol [type-(1 a A i I) start]

    <!--  有序列表: 带序号 ol
            type: 序号类型  1 a A i I
            start: 开始序号
      -->
    <ol type="a" start="2" >
        <li>苹果</li>
        <li>柿子</li>
        <li>梨</li>
    </ol>

无序列表：ul [type-(circle square disc)]

    <!--  无序列表: 不带序号
            type: 标识类型 - circle square disc
      -->
    <ul type="disc" >
        <li>苹果</li>
        <li>柿子</li>
        <li>梨</li>
    </ul>

超链接标签(a)

href - 必不可少的，超链接地址
target - 超链接打开方式（ _self、 _blank）

<a href="http://www.baidu.com" target="_blank">超链接的内容,可以是图片,可以是文字</a>

链接到当前页面的其他位置 -> 跳转锚点
1、设置锚点
2、跳转锚点

<a name="jianjie">简介编辑</a>
<a href="#jianjie">简介编辑</a>

<!-- 跳转顶部 -->
<a href="#">top</a>

表格标签 (table)
border - 边框
cellspacing - 单元格间隙、 cellpadding - 表格内容和边框之间的距离
width - 表格宽度、height - 表格高度
bgcolor - 表格背景颜色
align - 表的对齐方式

行：tr
单元格：td(内容) th(表头，自带加粗居中效果)
表头：thead 唯一
表格内容：tbody 多个
表尾：tfoot 唯一
表的标题：caption
属性：align(tbody tr td 内容对齐方式])

    <table border="1" cellspacing="0"
           width="500px" height="300px"
           cellpadding="10" bgcolor="#a9a9a9"
           align="center">
        <caption>表的标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>电话号码</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1-1</td>
                <td>1-2内容</td>
                <td bgcolor="red">1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
            </tr>
        </tfoot>
    </table>

rowspan: 跨行
colspan: 跨列

            <tr>
                <!-- 两行合并 -->
                <td rowspan="2">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 colspan="2">3-2</td>
<!--                <td>3-3</td>-->
            </tr>

框架标签 (frameset)
后台页面

frameset：子页面组合方式，是单一的
rows - 按行排列，cols - 按列排列

frame：子页面资源
src
noresize - 规定无法调整框架的大小
name=“给超链接使用”

<!-- head.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面头</title>
</head>
<body>
    <table width="100%">
        <tr>
        <td><img src="img/logo.png"/></td>
        <td><img src="img/header.png"/></td>
        <td>张三</td>
        </tr>
    </table>
</body>
</html>

<!-- left.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左边菜单页面</title>
</head>
<body>
    <h1>菜单项</h1>
    <ul>
        <li><a href="http://www.baidu.com" target="body">百度</a></li>
        <li><a href="https://www.163.com/" target="body">网易</a></li>
    </ul>
</body>
</html>

<!-- body.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主体内容</title>
</head>
<body>
    主体内容,用来显示菜单选中后的内容
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<frameset rows="15%, *" >
    <frame src="head.html" noresize>
    <frameset cols="15%, *">
        <frame src="left.html" noresize>
        <frame src="body.html" name="body" noresize>
    </frameset>
</frameset>
</html>

表单标签(form)

    <!-- form: 表单, 将数据提交给服务器的标签
            action: 服务器资源地址
            method: 发送请求的方式 get[默认] post
            enctype: 数据的类型 - 后面文件上传时需要修改
      -->
    <form action="#" method="get" >
        <!-- input属性
            type: 类型
                    text - 普通文本框
                    password - 密码框
                    radio - 单选按钮,必须使用name属性来进行分组
                    checkbox - 多选按钮
                    file - 文件
                    date - 日历 h5新特性
                    submit - 提交, 将数据发送给服务器
                    reset - 重置, 将表单恢复到初始状态
                    button - 普通按钮 <button>普通按钮</button>
                    hidden - 隐藏域
            name: input命名
                只有命名过的form表单标签,内容才能提交给服务器
            value: input框的值, 默认值
            placeholder: 内容提示
            readonly: 只读
            checked: radio和checkbox有效, 设置默认选中状态
         select标签: 下拉列表, 选项:option
            name: 加在select标签上
            value: 加在option标签上,没有value就是提交option标签体内容
            selected: 加在option标签上, 默认选择项
         textarea: 多行文本域
            cols: 默认显示列数
            rows: 默认显示行数
         -->
        <label for="username">用户名: </label>
        <input id="username" type="text" name="username"
                    placeholder="请输入用户名" readonly /><br>
        <label for="password">密码: </label>
        <input id="password" type="password" name="password" /><br>
        性别: <input id="sex_m" type="radio" name="sex" value="男" checked />
            <label for="sex_m">男</label>
            <input id="sex_f" type="radio" name="sex" value="女" />
            <label for="sex_f">女</label>
            <br>
        爱好: <input id="swimming" type="checkbox" name="hobby" value="游泳" checked/>
            <label for="swimming">游泳</label>
            <input id="playball" type="checkbox" name="hobby" value="打球"/>
            <label for="playball">打球</label>
            <input id="playgame" type="checkbox" name="hobby" value="打游戏"/>
            <label for="playgame">打游戏</label><br>
        头像: <input type="file" /><br>
        出生日期: <input type="date" name="birthday" /><br>
        籍贯: <select name="province">
            <option value="zj">浙江</option>
            <option value="sd">山东</option>
            <option>安徽</option>
            <option selected>江西</option>
        </select> 省<br>
        自我介绍: <textarea cols="20" rows="20"></textarea><br>

        <input type="submit" value="注册"/>
        <input type="reset"/>
        <input type="button" value="普通按钮"/>
        <button>另一种普通按钮</button><br>
        <input type="hidden" value="隐藏的默认值" />
    </form>

补充（配合css来使用）

div：块标签，自带换行 — 块元素
span: 普通的文本标签，不带换行 — 行内元素

明别

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（超文本标记语言）

Web前端– HTML：超文本标记语言，展示页面内容（ .html .htm -> 网页）– CSS：美化页面– JavaScript：动态页面效果HTML(超文本标记语言)标签：大小写不敏感，有容错性预定义标签：有规范，已经定义好的标签<a 属性=“属性值”>标签体 (/a) [() 代替<>]<a 属性=“属性值” /> 自闭和标签，没有标签体<!-- html文档类型, 版本 DOCTYPE: 约束, 规定了html的预
复制链接

扫一扫