Briefly summarize the content of HTML.
First introduce what HTML is.
What is HTML?
HTML is a language used to describe web pages. , hypertext markup language, information can be represented by text, pictures, sounds, images, etc., and documents written in html language can contain other forms of information. Use a large number of tags to describe web pages.
Basic tab:
The closing tag needs to be preceded by a /. For example:
The declaration must be the first line of the HTML document, before the tags.<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<meta charset="UTF-8">
<meta>描述性,描述信息,可以描述的包括不限于:name,content 格式,charset 字符集
<h1></h1> 到 <h5></h5> 都是标题,从1级标题到5级 标题。
例如: <meta charset="UTF-8" >意思是设置字符集为UTF-8.
整体<html>
头<head>
题目<title>
体<body>
段落<p>
换行<br>
水平线<hr>
斜体<em>
粗体<strong>
But because the > < space special symbol is occupied, it is replaced by other symbols.
> —— >
< —— <
空格 ——
版权号 —— ©
& —— &
example01:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<p>段落1</p>
<p>段落2</p>
换行1<br>
换行2 <br>
水平线
大于号 : > <br>
小于号 : < <br>
空格 : <br>
版权号: © <br>
& : & <br>
<hr>
</body>
</html>
image
<img>
Attribute: src image address
alt Alternate name, if you can't find the picture, use this to display
title hover name, when the mouse hovers, the displayed name
width wide
high
Hyperlink
<a></a>
Attribute: href jump interface
Where does the target window open
Anchor link: (jump between pages)
#name Jump. The name is set with the name attribute.
example02:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#down" name="top">Top</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top" name="down">Down</a>
</body>
</html>
Functional mail:
<a href="mailto:[email protected]"联系</a>
list:
无序列表:<ul></ul> unorder list
有序列表:<ol></ol> Order List
自定义:<dl></dl> <dt>列表名,<dd>内容
example03:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
<ol>
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ol>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>橘子</dd>
<dd>西瓜</dd>
</dl>
</body>
</html>
sheet
<table></table>
<tr></tr> 行
<td></td> 列
跨行 rowspan
跨列 colspan
<table border="10">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td colspan="2">3.2</td>
</tr>
</table>
media element:
<video></video>
<audio></audio>
属性:
src 路径
controls 控制器
autoplay 自动播放
muted 静音播放
(我设置自动播放的话,并没有效果,去网上查了后,好像是浏览器不支持(由于浏览器会拦截自动播放声音的视频),加上静音播放就可以自动播放了。
可能是怕声音吓到人吧……)
iframe inline frame
Didn't it just say that there is a target attribute in the hyperlink, and you can choose where the window will open. We can open several different windows on one page
Attributes:
name : name
id : id
src Initially displayed page or picture
frameborder : border
width: wide
height: high
scrolling = whether to scroll
form
<form></form> 表单
method 提交方法:get 、 post
action 提交对象
<input type=""> 属性 type: 参数: text文本、password密码、checkbox多选、radio单选、submit提交
reset重置、file选择文件、image图片、button按钮、email邮件验证、url、number数字、range滑块、search搜索……
属性
type、name、value、size、maxlength、checked、
列表框: <select>
<option></option>
</select>
文本域:<textarea cols="" rows=""></textarea>
禁用:disabled
隐藏:hidden
只读:readonly
example05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="localhost" method="post">
Username:<input type="text" name="username"> <br>
Password: <input type="password" name="password"> <br>
性别: <input type="radio" name="sex" checked>男
<input type="radio" name="sex">女 <br>
兴趣: <input type="checkbox" name="hobby">C
<input type="checkbox" name="hobby" checked>Java
<input type="checkbox" name="hobby">C++
<input type="checkbox" name="hobby">Python
<br>
所属地区编号: <input type="text" value="不可操作001" disabled>
标记:<input type="text" value="只能看" readonly>
<br>
<select name="Nation">
<option value="中国">中国</option>
<option value="澳大利亚">澳大利亚</option>
<option value="印度">印度</option>
</select>
<br>
个人简介:
<textarea name="Introduce" cols="30" rows="10"></textarea> <br>
简历文件: <input type="file"> <br>
<input type="submit" value="提交"> <br>
<input type="reset" value="重置"> <br>
</form>
</body>
</html>