HTML基础知识

最新推荐文章于 2023-11-29 11:41:27 发布

龙兄你好呀

最新推荐文章于 2023-11-29 11:41:27 发布

阅读量195

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/rqt1013_/article/details/124424964

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：HTML

HTML:全称是：Hyper Text Markup Language（超文本标记语言）。目前我们使用的版本是：HTML5。

W3C：全称是：World Wide web Consortium:（万维网联盟）。

W3C标准包括：
（1）结构化标准语言：HTML，XML
（2）表现标准语言：css
（3）行为标准：DOM,ECMAScript

HTML基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

一些标签讲解：
（1）!DOCTYPE html：告诉浏览器，我们要使用什么规范，默认为html5。
（2）<body>标签：代表网页主体，网页上显示的所有东西都在这标签下面写。
（3）<meta>：用来描述网站的一些相关信息。
（4）<title>：网页标题。

二：HTML中的基础标签

（1）标题标签：

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

（2）段落标签：

<p>牛马    绯红之王</p>
<p>两只老虎</p>

（3）换行标签：

<br/>

（4）水平线标签：

<hr/>

（5）字体标签样式：

<!--粗体-->
<strong>i love you</strong>
<!--斜体-->
<em>i love you</em>

（6）一些特殊符号：

<!--空格-->
空&nbsp;&nbsp;&nbsp;&nbsp;格
<!--大于小于-->
&gt;
&lt;

（7）图像标签：

<img src="../image/u=3007709509,2093393272&fm=26&gp=0.jpg" 
	alt="加载失败" title="小狐狸" height="375" width="500">

常见的图像格式：GIF，JPG，PNG。
图像标签说明
src有两种路径
（1）相对路径：相对于项目的某个文件路径。推荐使用相对路径。../表示上一级目录。
（2）绝对路径：如D:\computer_study\web\web_front\html_css\image\4H@ZX$BDOLW3Q42DEJH9H}A.png这种的就是绝对路径。

alt属性表示当图片加载出错时代替图片的文字。
title属性表示鼠标悬停在图片上时出现的文字。
height和width属性表示图片的高度和宽度。

（8）超链接标签：

页面链接：（页面之间跳转）

<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.baidu.com" target="_self">百度</a>

href属性表示跳转到哪个地址页面或跳转到某个网站。
target属性表示在哪里打开：
（1）target="_blank"表示在新标签中打开。
（2）target="_self"表示在当前页面打开。

锚链接：（跳转到页面的某个指定部分）

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接：(发送邮件)

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

（9）列表标签

有序列表：

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

无序列表：

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

自定义列表：

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c/c++</dd>
</dl>

（10）表格标签

<table>
    <tr>
        <td>java</td>
        <td>c</td>
        <td>python</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
    </tr>
</table>

<tr>:表示表格中的一行。
<td>：表示表格中的一列。
colspan和rowspan：跨列和跨行。后面的数字代表跨多少行或多少列。

<td colspan="2">java</td>    
<td rowspan="2">Linux</td>

（11）音频和视频标签

视频标签：

<video src="../video/P138.游泳教练【淘宝店铺：控制不当%20鬼畜素材】.mp4" 
		controls autoplay></video>

controls属性表示可以控制视频的播放，如快进、音量等。
autoplay属性表示打开网页自动播放。

音频标签：

<audio src="../audio/狂三的威风绅士.mp3" 
		controls autoplay></audio>

（12）内联框架标签

即在一个页面里面内嵌另一个页面。

<iframe src="https://www.baidu.com" 
	width="800px" height="1000px"></iframe>

（13）表单标签

<form action="HTML基本结构.html" method="get">
    <p>
        用户：<input type="text" name="username">
    </p>
    <p>
        密码：<input type="password" name="password">
    </p>
</form>

action属性可以是网站，也可以是请求地址。
method属性是提交方式，有GET和POST两种方式。GET方式提交我们可以在url看到提交的信息，不安全，不能传输大文件，但是高效。POST方式提交比较安全，同时可以传输大文件。

（14）文本框、单选框、按钮、多选框和文件域

type属性为元素类型：
（1）type="text"为文本框，默认也是为文本框。
（2）type="password"为密码框，在浏览器上输入以*显示。

<p>
	用户：<input type="text" name="username" value="龙兄">
</p>
<p>
    密码：<input type="password" name="password" value="123456">
</p>

name属性为元素的名字。
value属性为默认的初始值。
size属性为文本框的长度。

（3）type="radio"为单选框,要为选项指定为同组，如性别分为男、女则必须指定属性name为同一组，不然就不是单选：

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

name属性为元素的名字。
value属性为值。
checked为默认选项。

（4）type="checkbox"为多选框：

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

checked属性为默认选项。

（5）按钮标签：

<p>
	<input type="button" name="btn" value="普通按钮">
	<input type="image" name="btn" value="图像按钮">
	<input type="submit" name="btn" value="提交按钮">
	<input type="reset" name="btn" value="重置按钮">
 </p>

type="button"为普通按钮。
type="image"为图像按钮。
type="submit"为提交按钮。
type="reset"为重置按钮。

（6）type="file"为文本域：
即可以上传本地文件到网页上。

<p>
	<input type="file" name="files">
</p>

（15）列表框（下拉框）

<p>国家：
	<select name="country">
	    <option value="china" selected>中国</option>
	    <option value="america" >美国</option>
	    <option value="england" >英国</option>
	</select>
</p>

selected属性为默认选项。

（16）文本域

即多行文本：

<p>反馈：
	<textarea name="textarea" cols="50" rows="10"></textarea>
</p>

cols属性为多少列。
rows属性为多少行。

（17）简单验证、滑块和搜索框

type="email"邮箱验证：

<p>
	<input type="email" name="email">
</p>

type="url"为url验证：

<p>
	<input type="url" name="url">
</p>

type="range"为滑块：

<p>音量：
	<input type="range" name="volume" min="0" max="100">
</p>

min和max属性为滑块的最小值和最大值。

（18）隐藏域

type="hidden"为隐藏域；
在前端不显示出来，但是可以传到后端，在开发中很有用。

<p>
	<input type="hidden" name="username">
</p>

（19）增强鼠标可用行

label标签可以在不点击到框的时候，也能选中，如下所示，点击文字“你点我试试”也能点击到文本框。

<p>
	<label>你点我试试
		<input type="text" name="username">
	</label>
</p>

（20）简单的表单验证

<p>
	用户：<input type="text" name="username" placeholder="请输入用户名"
	  	required>
</p>

属性placeholder为提示信息，提示输入框里应该填什么。
属性required为非空提示，表示这个输入框不能为空，否则不能提交。

龙兄你好呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

一：HTMLHTML:全称是：Hyper Text Markup Language（超文本标记语言）
复制链接

扫一扫

专栏目录