HTML基础常识

it2025-04-27 14

HTML

初识HTML

什么是HTML

Hyper Text Markup Language(超文本标记语言)

HTML发展史

HTML5的优势

世界知名浏览器厂商对HTML5的支持

如:微软,Google,苹果,Opera,Mozilla等

市场的需求

跨平台

W3C标准

W3C

World Wide Web Consortium(万维网联盟)成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构http://www.w3.org/http://www.chinaw3c.org/W3C标准包括: 结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScript)

常见IDE

记事本DreamweaverIDEAWebStorm…

HTML注释:HTML注释只有一种,格式为 ,以"<!–“开头,以”–>"结尾

快捷键:Ctrl+/

网页基本信息

DOCTYPE声明

告诉浏览器我们要使用什么规范,如<!DOCTYPE html >表示使用html

<title>标签

title标签为网页标题

<meta>标签

meta标签是描述性标签,用来描述网站的一些信息

一般用来做SEO

<!DOCTYPE html>  <html lang="ch">  <head> <meta charset="UTF-8"> <title>这里是网页标题</title> </head>  <body>  这里是网页的主体内容 </body> </html>

以上代码形成的网页界面如下:

网页基本标签

<!DOCTYPE html>  <html lang="ch">  <head> <meta charset="UTF-8"> <title>这里是网页标题</title> </head>   <body bgcolor="aqua">  <h1>这里是一级标题</h1> <h3>这里是三级标题</h3> <h6>这里是六级标题</h6> <p align="left">这里是网页的主体内容1</p> <p align="center">这里是网页的主体内容2</p> <p align="right">这里是网页的主体内容3</p>  <hr/> 12 34 <p>12 34 </p>  <p>1这里测试换行这里测试换行1</p> 2这里测试换行这里测试换行2 3这里测试换行<br>这里测试换行3 <p>4这里测试换行<br>这里测试换行4</p> <p><strong>这里测试字体样式,粗体</strong></p> <p><em>这里测试字体样式,斜体</em></p> <h2>特殊符号</h2> 空格: 一般情况下在源码内连续多个空格,在网页内只会显示一个空格,若要显示多个空格,需要用特殊符号&+nbsp;如:空      格 <br/>换行        >大于号<小于号©版权符号 </body> </html>

以上代码形成的网页界面如下:

图像,超链接,网页布局

图像标签

常见的图像格式;

JPG,GIF,PNG,BMP等

图像标签:

其中 src为图像地址(路径),alt为图像的替代文字(在没有找到图片或者图片未加载的时候显示的文字),title为鼠标悬停在图片上时显示的文字,width和height分别表示图片的宽和高

<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>图像标签</title> </head> <body>  <img src="../resources/image/001.png"alt="1234"title="这是一张图">  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"alt="1234"title="这也是一张图"> </body> </html>

以上代码形成的网页界面如下:

超链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a> 文本超链接图片超链接

锚链接(书签)(需要要跳转的位置设置标记),功能性链接

<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>链接标签</title> </head> <body>  <a href="http://www.baidu.com"target="_blank" name="标记1">点击我跳转到百度</a><br><br><br><br>  <a href="http://www.baidu.com"target="_parent"> <img src="../resources/image/001.png" alt="点击我跳转到百度"> </a><br><br><br>  <a href="#标记1">回到name标记处</a><br><br><br> <a href="mailto:2628234026@qq.com">点此转到邮箱</a> </body> </html>

以上代码形成的网页界面如下:

行内元素和块元素

块元素无论内容多少,该元素独占一行(p,h1-h6) 行内元素内容撑开宽度,左右都是行内元素的可以排在一行(a,strong,em)

列表,表格,媒体元素

列表

什么是列表

列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息

列表的分类

无序列表有序列表定义列表 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body>  <ol> <li>第一点</li> <li>第二点</li> <li>第三点</li> <li>第四点</li> </ol> <ol> <li>第五点</li> </ol> <hr>  <ul> <li>第一点</li> <li>第二点</li> <li>第三点</li> <li>第四点</li> </ul> <ul> <li>第五点</li> </ul> <hr>  <dl> <dt>列表标题一</dt> <dd>第一点</dd> <dd>第二点</dd> <dd>第三点</dd> <dd>第四点</dd> <dt>列表标题二</dt> <dd>第一点</dd> <dd>第二点</dd> <dd>第三点</dd> <dd>第四点</dd> </dl> </body> </html>

以上代码形成的网页界面如下:

表格

为什么使用表格简单通用结构稳定基本结构单元格行列跨行跨列 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body>  <table border="1px"> <tr>  <td colspan="4" align="center">1</td> </tr> <tr>  <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </body> </html>

以上代码形成的网页界面如下:

媒体元素

视频元素

video

音频元素

audio

<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body>   <video src="路径"controls autoplay></video>  <audio src="路径"controls autoplay></audio> </body> </html>

页面结构分析

元素名描述header标记头部区域的内容(用于整个页面或页面中的一块区域)footer标记脚部区域的内容(用于整个页面或页面中的一块区域)sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用(常用于侧边栏)nav导航类辅助内容

iframe内联框架

<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title></title> </head> <body align="center">  <br><br> <iframe src="https://www.w3.org/" name="biaoji1" frameborder="0"width="90%"height="400px"></iframe> <br><br>  <p align="center"><a href="https://www.google.cn/"target="biaoji1">打开谷歌主页</a> <a href="https://www.baidu.com/"target="biaoji1">回到百度主页</a></p> </body> </html>

以上代码形成的网页界面如下:

表单及表单应用

表单元素格式

属性说明type指定元素的类型,text,password,checkbox,radio,submit,reset,file,hidden,image,button,默认为textname指定表单元素的名称value元素的初始值,type为radio时必须指定的一个值size指定表单元素的初始宽度,当type为text或password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位maxlengthtype为text或者password时,输入的最大字符数checkedtype为radio或者checkbox时,指定按钮是否是被选中

表单的应用

隐藏域 hidden只读 readonly禁用 disabled <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body align="center">  <form action="提交地址"method="get">  <p>名字: <input type="text" name="username"size="20"></p> <p>密码: <input type="password"name="pwd"></p>  <p>性别: <input type="radio" value="boy" name="sex"/>男 <input type="radio" value="girl" name="sex"/>女 </p>  <p>爱好: <input type="checkbox"value="sleep"name="hobby">睡觉 <input type="checkbox"value="code"name="hobby">敲代码 <input type="checkbox"value="chat"name="hobby">聊天 <input type="checkbox"value="eat"name="hobby">吃东西 <input type="checkbox"value="game"name="hobby">玩游戏 </p>  <p>下拉框: <select name="列表名称"> <option value="A" selected>语文</option> <option value="B">数学</option> <option value="C">英语</option> <option value="D">物理</option> <option value="E">化学</option> <option value="F">生物</option> </select> </p>  <p>反馈: <textarea name="textarea" cols="30" rows="10"placeholder="请输入你的反馈"></textarea> </p>  <P> <input type="file"name="files"> </P>  <p>按钮: <input type="button" name="but1" value="点击位置"><br>  <input type="submit"> <input type="reset"> </p> </form> </body> </html>

以上代码形成的网页界面如下:

表单初级验证

常用方式:

placeholder 提示信息requied 非空判断pattern 正则表达式

最新回复(0)