HTML基础

最新推荐文章于 2024-07-19 15:20:42 发布

s_yqb

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量377

点赞数 1

分类专栏：前端基础文章标签： html html5

本文链接：https://blog.csdn.net/qq_39037116/article/details/120379831

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML

基本信息
基本标签
常用标签
页面结构
表单

基本信息

概念：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

W3C指万维网联盟，致力于实现所有的用户都能够对 web 加以利用。最重要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。

W3C标准包括：
1、结构化标准语言(HTML、XML)
2、表现标准语言(CSS)
3、行为标准(DOM、ECMAScript)

网页基本结构：
1、DOCTYPE:告诉浏览器，我们要使用什么规范，不写时浏览器默认是HTML
2、head:网页头部
其中，title 可以指定网页标题
meta是描述性标签，用来描述网页信息，比如编码方式
3、body:主体部分

<!DOCTYPE html>
<html lang="en" xmlns:name="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
	主体部分
</body>

行内元素和块元素：
块元素：无论内容多少，该元素独占一行，如标题、段落等
行内元素：内容撑开宽度，多个行内元素可以排在一行，如链接、粗体

基本标签

标题标签：

<h1>第一级</h1>
<h2>第二级</h2>
<h3>第三级</h3>

段落标签：

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

换行标签：

第一行<br/>
第二行<br/>
第三行<br/>

水平线标签：

<hr/>

字体样式标签：

<stronger>粗体</stronger>
<em>斜体</em>

特殊符号：

<!--特殊符号 &xxx; -->
空&nbsp;&nbsp;&nbsp;&nbsp;格
大于号 &gt;
小于号 &lt;
&copy;狂神开发

常用标签

图像标签

<img src="../resources/img/ke.png" alt="图片" width="300" height="250" title="图片">

src：图像地址。有相对路径和绝对路径。绝对路径就是从磁盘开始，把地址写死。相对路径是相对于当前html所在的目录的，要返回上一级目录可以用 . . /

alt：当图像找不到时，用文字来代替图像

width、height：设置图片的宽度和高度

title：鼠标悬停提示文字

链接标签

页面间链接：从一个页面链接到另一个页面

<a href="https://www.baidu.com/" target="_blank">百度</a><br/>
<a href="1.我的第一个网页.html" target="_self">我的第一个网页</a><br/>
<a href="https://www.baidu.com/" >
    <img src="../resources/img/ke.png" alt="图片" width="300" height="250" title="图片">
</a><br/>

href：链接路径。可以是外部的网址，也可以是自己网站项目中的地址

target：表示链接在哪个窗口打开，常用的有_blank 和 _self

锚链接

<a name="锚标记"></a>
<a href="#锚标记">跳转到锚标记处</a><br/>
<a href="1.我的第一个网页.html#锚标记">跳转到我的第一个网页中的锚标记处</a><br/>

锚链接可以实现页面内或者页面间跳转。
1、首先需要一个锚标记，即name属性，值可以任意
2、用 href 属性链接到这个锚上，#+name。
3、若要跳转到其他页面，则也需要加上页面名

功能性链接

<a href="mailto:1026136841@qq.com">联系我</a>

列表标签

无序列表

<ul>
  <li>java</li>
  <li>python</li>
  <li>c++</li>
</ul>

有序列表

<ol>
  <li>java</li>
  <li>python</li>
  <li>c++</li>
</ol>

定义列表
dl 是定义列表标签，dt 是列表名称，dd 是列表内容

<dl>
    <dt>学科</dt>
    <dd>英语</dd>
    <dd>数学</dd>
    <dd>语文</dd>
<dl>

在这里插入图片描述

表格标签

table 代表表格，tr 代表行， td 代表列
border可以设置边框，colspan设置跨列，rowspan设置跨行

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">秦疆</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

在这里插入图片描述

视频和音频标签

video是视频标签，audio是音频标签，src是资源路径，controls是显示控制条，autoplay是打开网页自动播放

<video src="../resources/vedio/vedio.mp4" controls autoplay></video>
<audio src="../resources/audio/name.mp3" controls autoplay></audio>

内联框架

在网页中再内嵌一个网站，可以是外部的，也可以是自己项目内的，比如在网站中显示百度搜索

iframe是内联框架的标签，src 指内嵌网站的路径，width 和 height 指展示的宽度和高度

<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800" height="600"></iframe>

可以设置name属性，然后配合链接标签，使得链接的地址可以在内联框架中展示。下面例子中内联框架本来展示的是百度，点击链接后，框架中展示的是哔哩哔哩

<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800" height="600"></iframe>

<a href="https://www.bilibili.com" target="hello">点击这里，使得内联框架跳转</a>

页面结构

一个网页可能包含以下几个部分，你可以将相应的代码放入对应的部分中，这样会很清晰
在这里插入图片描述

<header><h2>头部</h2></header>
<section><h2>一块独立区域</h2></section>
<footer><h2>底部</h2></footer>

表单

表单属性

form 是表单标签
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：get和post 提交方式。get方式提交，我们可以在url中看见提交的数据，不安全，但直观高效；post方式提交，url中不显示，比较安全，可以传输大文件

<form action="1.我的第一个网页.html" method="get">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p>提交<input type="submit" name="submint"></p>
</form>

在这里插入图片描述

表单元素格式

在这里插入图片描述
文本框：

  <p>名字：<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p>
  <p>密码：<input type="password" name="pwd" value="123"></p>

type表示元素类型，name为元素名，maxlength是可输入最大字符，value表示元素的初始值，placeholder用来显示提示信息
单选框：

  <p>性别
      <input type="radio" value="boy" name="sex" checked/>男
      <input type="radio" value="boy" name="sex"/>女
  </p>

单选框中，name属性相同的划分到一组，每组只能选择一个。checked表示初始就选中。提交的时候是提交value中的值，例子中的男女只是用来修饰的。

多选框：

    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

按钮：

    <p>按钮
        <input type="button" name="button1" value="我是按钮">
        <input type="image" src="../resources/img/ke.png">
        <input type="submit">
    	<input type="reset" value="点击清空">
    </p>

button是普通按钮，image表示图片按钮，submit表示提交按钮，reset表示重置按钮。用value属性可以设置按钮上显示的文字。

下拉框：

    <p>国家：
        <select name="name" >
            <option value="china" selected>中国</option>
            <option value="usa">美国</option>
            <option value="india">印度</option>
        </select>
    </p>

value是要提交的值

文本域：

    <p>反馈：
        <textarea name="textarea" cols="30" rows="20">文本内容</textarea>
    </p>

用来写很多文本，可以指定文本域的大小
文件域：

    <p>反馈：
        <input type="file" name="files">
    </p>

其他功能：

	<!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email"/>
    </p>

	<!--自定义邮箱，通过正则表达式验证输入格式-->
	<p>
	    <input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
	</p>

    <!--url验证-->
    <p>URL：
        <input type="url" name="url"/>
    </p>

    <!--数字验证，step表示步长-->
    <p>数量：
        <input type="number" name="num" max="100" min="0" step="1"/>
    </p>

    <!--滑块-->
    <p>滑块：
        <input type="range" name="voice" min="0" max="100" step="2"/>
    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search" />
    </p>
    
    <!--增强鼠标可用性,下面例子可以通过点击文字，锁定输入框-->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">