HTML overview review

HTML

- - What is HTML?
  - Basic tab:
  - image
  - Hyperlink
  - list:
  - sheet
  - media element:
  - iframe inline frame
  - form

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.

> —— &gt; 
< —— &lt;
空格 —— &nbsp;
版权号 —— &copy;
& —— &amp;

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>
水平线
大于号 : &gt; <br>
小于号 : &lt; <br>
空格 : &nbsp;&nbsp;&nbsp; <br>
版权号: &copy; <br>
& : &amp; <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>