HTML基础知识点
1、HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言
(markup language)
HTML 使用标记标签来描述网页
2、HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的 标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML存在自结束标签，即不写自结束的 /
3、HTML基本结构
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body style="background-color:yellow">
<hgroup>
<h1 style="background-color:red;text-align: center">This is heading 1h1>
<h2 style="background-color:red;text-align: center">This is heading 2h2>
<h3 style="background-color:red;text-align: center">This is heading 3h3>
<h4 style="background-color:red;text-align: center">This is heading 4h4>
<h5 style="background-color:red;text-align: center">This is heading 5h5>
<h6 style="background-color:red;text-align: center">This is heading 6h6>
hgroup>
<p style="background-color:green">这是段落1。p>
<hr />
<p style="background-color:green">这是段落2。p>
<hr />
<p style="background-color:green">这是段落3。p>
<hr />
<p style="background-color:green">这是段落4。<br />这是段落5。p>
<b>This text is boldb>
<br />
<strong>This text is strongstrong>
<br />
<em>This text is emphasizedem>
<br />
<big>This text is emphasizedbig>
<br />
<small>This text is emphasizedsmall>
<br />
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
blockquote>
这是短的引用：
<q>
这是短的引用。
q>
body>
html>
显示效果：
4、HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，也可以使用单引号。在某些个别的情况下，比如属性值本身就含有双引号，则必须使用单引号。
HTML 标签参考手册
5、HTML 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 标签在 HTML 中创建链接。
通过使用 href 属性 - 创建指向另一个文档的链接；
通过使用 name 属性 - 创建文档内的书签。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body>
<a href="https://www.baidu.com/">超链接1a>
<br />
<a href="./practice.html">超链接2a>
<br />
<a href="Test\test1.html">超链接3a>
<br />
<a href="http://www.w3school.com.cn/" target="_blank">超链接4a>
<br /><br />
<p>
<a href="#C4">查看 Chapter 4。a>
p>
<h2>Chapter 1h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 2h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 3h2>
<p>This chapter explains ba bla blap>
<h2><a id="C4">Chapter 4a>h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 5h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 6h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 7h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 8h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 9h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 10h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 11h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 12h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 13h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 14h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 15h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 16h2>
<p>This chapter explains ba bla blap>
<h2>Chapter 17h2>
<p>This chapter explains ba bla blap>
<a href="#">回到顶部a>
body>
html>
效果展示：
6、在 HTML 中，图像由
要在页面上显示图像，需要使用源属性（src），src 指 "source"且源属性的值是图像的 URL 地址。URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。请注意，如果把鼠标指针移动到图像上，大多数浏览器会显示 “alt” 文本。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body background="huawen.png">
<img src="wiliuqi.jpg" width=500px>
<br />
<img src="wuliuiq.gif" height=200px>
<br />
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<h2>未设置对齐方式的图像：h2>
<p>图像 <img src="eg_cute.gif"> 在文本中p>
<h2>已设置对齐方式的图像：h2>
<p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中p>
<p>图像 <img src="eg_cute.gif" align="middle"> 在文本中p>
<p>图像 <img src="eg_cute.gif" align="top"> 在文本中p>
<p>
<img src ="eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
p>
<p>
<img src ="eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
p>
body>
html>
显示效果： 显示效果： 有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 显示效果： 效果展示： HTML实体符号参考手册 效果显示： 表单元素语法： 密码框-语法： 单选按钮-语法： 复选框-语法： 列表框-语法： 按钮-语法： 多行文本域-语法： 文件域-语法： 邮箱-语法： 网址-语法： 数字-语法： 滑块-语法： 搜索框-语法：
7、HTML 创建表格，表格由 标签来定义。每个表格均有若干行（由
标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。表格的表头使用 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body>
<h4>这个表格没有边框：h4>
<table>
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<h4>水平表头：h4>
<table border="1">
<tr>
<th>姓名th>
<th>电话th>
<th>性别th>
tr>
<tr>
<td>Bill Gatestd>
<td>123 456 789td>
<td>男td>
tr>
table>
<h4>垂直表头：h4>
<table border="1">
<tr>
<th>姓名th>
<td>Bill Gatestd>
tr>
<tr>
<th>电话th>
<td>123 456 789td>
tr>
<tr>
<th>性别th>
<td>男td>
tr>
table>
<h4>这个表格有一个标题和粗边框：h4>
<table border="6">
<caption>我的标题caption>
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
table>
<h4>横跨两列的单元格：h4>
<table border="1">
<tr>
<th>姓名th>
<th colspan="2">电话th>
tr>
<tr>
<td>Bill Gatestd>
<td>123 456 789td>
<td>123 456 789td>
tr>
table>
<h4>横跨两行的单元格：h4>
<table border="1">
<tr>
<th>姓名th>
<td>Bill Gatestd>
tr>
<tr>
<th rowspan="2">电话th>
<td>123 456 789td>
tr>
<tr>
<td>123 456 789td>
tr>
table>
<h4>背景颜色：h4>
<table border="1" bgcolor="red">
<tr>
<td>Firsttd>
<td>Rowtd>
tr>
<tr>
<td>Secondtd>
<td>Rowtd>
tr>
table>
<h4>背景图像：h4>
<table border="1" background="huawen.png">
<tr>
<td>Firsttd>
<td>Rowtd>
tr>
<tr>
<td>Secondtd>
<td>Rowtd>
tr>
table>
<table width="400" border="1">
<tr>
<th align="left">消费项目th>
<th align="right">一月th>
<th align="right">二月th>
tr>
<tr>
<td align="left">衣服td>
<td align="right">100td>
<td align="right">100td>
tr>
<tr>
<td align="left">化妆品td>
<td align="right">300td>
<td align="right">300td>
tr>
<tr>
<td align="left">食物td>
<td align="right">500td>
<td align="right">500td>
tr>
<tr>
<th align="left">总计th>
<th align="right">900th>
<th align="right">900th>
tr>
table>
body>
html>
8、HTML 支持有序、无序和定义列表。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 。
标签。
开始。每个自定义列表项的定义以 。
注意：列表之间可以相互嵌套。DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body>
<h4>Disc 项目符号列表：h4>
<ul type="disc">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ul>
<h4>Circle 项目符号列表：h4>
<ul type="circle">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ul>
<h4>Square 项目符号列表：h4>
<ul type="square">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ul>
<h4>数字列表：h4>
<ol>
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ol>
<h4>字母列表：h4>
<ol type="A">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ol>
<h4>小写字母列表：h4>
<ol type="a">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ol>
<h4>大写罗马字母列表：h4>
<ol type="I">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ol>
<h4>小写罗马字母列表：h4>
<ol type="i">
<li>苹果li>
<li>香蕉li>
<li>柠檬li>
<li>桔子li>
ol>
<h4>一个嵌套列表：h4>
<ul>
<li>咖啡li>
<li>茶
<ul>
<li>红茶li>
<li>绿茶
<ul>
<li>中国茶li>
<li>非洲茶li>
ul>
li>
ul>
li>
<li>牛奶li>
ul>
<h2>一个定义列表：h2>
<dl>
<dt>计算机dt>
<dd>用来计算的仪器 ... ...dd>
<dt>显示器dt>
<dd>以视觉方式显示信息的装置 ... ...dd>
dl>
body>
html>
8、内联框架的iframe 用于在网页内显示网页，其中属性src指定要引入的网页路径，frameborder 只有0/1 两个值分别表示显示与不显示边框。DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body>
<iframe src="https://www.w3school.com.cn"
frameborder="0"
width=800
height=400>
iframe>
body>
html>
9、HTML的语义标签
10、HTML 字符实体（相当于进行转义）
11、HTML媒体
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果需要未经压缩的声音（音乐或演讲），应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Codertitle>
head>
<body>
<audio controls>
<source src="还是会想你 .mp3" >
audio>
<video controls>
<source src="敬礼.mp4">
video>
body>
html>
12、HTML表单用于收集用户输入。 元素定义 HTML 表单，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
<input type="text"（input元素类型）name="fname"（input元素名称） value="text"（input元素的值）/>
文本框-语法：<input type="text"(文本框) name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
<input type="password "(密码框) name="pass"(密码框的名称) size="20"(密码框的长度) />
<input name="gen" type="radio"(单选按钮框) value="男"(值) checked(单选按钮选中状态) />男
<input name="gen" type="radio" value="女" />女
<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…option >
<option(选项) value="选项的值">…option >
select>
<input type="reset" (重置按钮) name="butReset" value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>
<textarea(多行文本域) name="showText" cols="x"(显示的列数) rows="y"(显示的行数)>文本内容 textarea >
<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上传" />p>
form>
<p>邮箱:<input type="email"（邮箱） name="email"/>p>
<input type="submit"/>
<p>请输入你的网址:<input type="url"（网址） name="userUrl"/>p>
<input type="submit"/>
<p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/>p>
<input type="submit"/>
<p>请输入数字:<input type="range"(滑块) name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/>p>
<input type="submit"/>
<p>请输入搜索的关键词:<input type="search"(搜索框) name="sousuo"/>p>
<input type="submit"/>
你可能感兴趣的:(前端,html,前端)