HTML-基础-超文本标记语言

最新推荐文章于 2023-06-21 18:50:22 发布

persistenthuang

最新推荐文章于 2023-06-21 18:50:22 发布

阅读量220

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43309907/article/details/107294532

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2345

HTML5(超文本标记语言)

Hyper Text Markup Language

W3C（万维网联盟）国际性技术标准机构
W3C标准包括：
- 结构化语言（HTML，XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构

网页基本信息

<!--注释样式-->

<!--DOCTYPE:告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<!--html:总的标签，所有信息都在这个标签内部-->
<html lang="en">
<!--head:代表网页头部-->
<head>
    <!--meta:描述性标签,用来描述我们的网站的一些信息-->
    <!--meta:一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="yaohui,persistenthuang">
    <meta name="description" content="这是我的testHTML">
    <!--title:网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body:代表网页主体部分-->
你好啊
<body>

</body>
</html>

基本标签：

标题标签：
段落标签：
换行标签：
水平线标签：
字体样式标签：
注释和特殊符号：
- 空格：
- >
- <
- ©版权所有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>这是第一段文字:简历是门面，更是敲门砖，能否拿到大厂的面试机会，
    就要看自己的简历如何，抛开学历意外，大厂最看重简历是否有亮点</p>
<p>这是第二段:哈哈哈哈</p>
<p>这是第三段:哈哈哈哈哈</p>

<!--换行标签-->
第一行 <br/>
第二行 <br/>
第三杠 <br/>
第四行 <br/>

<!--水平线标签-->
<hr/>

<!--字体样式标签-->
<h1>字体样式标签</h1>
<strong>粗体字体</strong><br>
<em>斜体</em>

<hr/>
<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;格
&gt;<br>
&lt;<br>
&copy;版权所有<br>
</body>
</html>

图像标签（img）

234

src：图片地址（必填）
- 相对地址，绝对地址
- …/表示上一级目录
alt：图片名字（必填）：加载不出来的时候会显示
title：悬停文字
width：宽度
height：高度

<img src="../resoutces/images/1.jpg" alt="图片" title="悬停文字" width="200" height="200">

链接标签（a）

12333

图像标签：

<!--点击文字跳转-->
<a href="https://www.baidu.com">点击我跳转百度</a>

<!--点击图像跳转-->
<a href="https://www.baidu.com" target="_blank">点击我跳转百度
    <img src="../resoutces/images/1.jpg" alt="图片" title="悬停文字" width="" height="">
</a>

锚链接：实现页面间的跳转

<!--标记位置-->
<a name="top">顶部</a>
<!--锚链接跳转的标记位置-->
<a href="#top">回到顶部</a>
<!--跳转到相应页面的标记链接-->
<a href="https://www.baidu.com#top">回到顶部</a>

功能链接

<!--邮箱链接-->
<a href="mailto:persistenthuang@163.com">点击联系我</a>

<!--QQ链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击加我" title="点击加我"/>
</a>

行内元素和块标签

1233

列表（ol，ul，dl）


<!--列表-->

<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>C/C++</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>C/C++</li>
</ul>

<!--自定义列表-->
<!--dl:标签-->
<!--dt:列表名称-->
<!--dd:列表内容-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dt>位置</dt>
    <dd>湖北</dd>
    <dd>西安</dd>
</dl>

表格标签（table）


<!--表格标签:table
行 tr
列 td
-->
<!--border:表示边框宽度-->
<table border="1px" >
    <tr>
        <!--colspan:跨列-->
        <td colspan="4">1.1</td>
    </tr>
    <tr>
        <!--rowspan:跨行-->
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
    </tr>
</table>

视频和音频（video audio）

<!--
视频:video
音频:audio
src:路径
controls:添加控制
autoplay:自动播放

-->
<video src="../resoutces/audio/1.mp4" controls>视频</video>
<audio src="../resoutces/audio/2.mp3" controls></audio>

网站页面结构

1234

内联框架（iframe）

123

<!--内联框架:iframe
src:网站地址
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
<hr>
<iframe src="" name="iframe1" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="iframe1">点击跳转到框架</a>

表单（from）

<!--表单语法:from
action:表单提交位置,可以是一个网站,也可以是一个请求处理地址
method:提交方式,
       get:可以在url中看到提交信息,不安全
       post:比较安全,传输大文件
-->
<from action="test01.html" method="get">
    
</from>

文本框（input text）

 <!--文本输入框:
    text
    password
    -->
    <p>姓名<input type="text" name="username"></input></p>
    <p>密码<input type="password" name="password"></p>

单选框标签（input radio）

<!--单选框标签:radio
    value:单选框的值
    name:表示组
    -->
    <p>
        性别:
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

多选框标签（input checkbox）

<!--多选框标签:checkbox
    value:单选框的值
    name:表示组
    -->
    <p>爱好
        <input type="checkbox" value="sleep" name="zu">睡觉
        <input type="checkbox" value="code" name="zu">代码
        <input type="checkbox" value="cheat" name="zu">聊天
    </p>

按钮（input button）

<!--按钮:button
    value:按钮显示名称
    name:按钮值
    button:普通按钮
    image:图片按钮
    submit:提交按钮
    reset:重置按钮
    -->
    <p>
        <input type="button" value="点击" name="btn1">
        <input type="image" src="../resoutces/images/1.jpg">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>

下拉框（select option）

    <!--下拉框:select
    option:选项
        selected:默认选中
    -->
    <p>国家:
        <select name="列表名称" id="">
            <option value="选项值" selected>中国</option>
            <option value="选项值">英国</option>
            <option value="选项值">印度</option>
            <option value="选项值">瑞士</option>
        </select>
    </p>

文本域（textarea）

 <!--文本域:textarea
    cols\rows:行列
    -->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

文件域（input file）

    <!--文件域:input file:
    name:属性值
    -->
    <p>
        <input type="file" name="files">
    </p>

输入验证

<!--
    邮件验证:email
    URL验证:URL
    数字验证:
        max:最大值
        min:最小值
        step:步长
    -->
    <p>邮箱:
        <input type="email" name="email">
    <hr>
        URL:
        <input type="url" name="url">
    <hr>
        数字:
        <input type="number" name="number" max="100" min="10" step="10">
    </p>

滑块（input type）

<!--滑块:range
    max:最大值
    min:最小值
    step:步长
    -->
    <p>音量:
        <input type="range" name="range" max="100" min="10" step="2">
    </p>

搜索框（input search）

<!--搜索框:search
    -->
    <p>搜索:
        <input type="search" name="search">
    </p>

label标签

增强鼠标可用性
点击可以指向其他组件

<!--label-->
    <p>
        <label for="12">点我搜索:</label>
        <input type="text" id="12">
    </p>

表单一些属性

隐藏域：hidden（隐藏了但是值还在）
只读：readonly
禁用：disabled

表单初级验证

234

placeholder：提示用户输入信息
required：输入不能为空
pattern：正则表达式验证