HTML基础语法

最新推荐文章于 2023-05-03 11:02:11 发布

Wielun

最新推荐文章于 2023-05-03 11:02:11 发布

阅读量6.3k

点赞数 7

分类专栏：前端文章标签： HTML HTML语法

本文链接：https://blog.csdn.net/Dream_ya/article/details/84988429

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML简介

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

二、模板介绍

1、模板

我们用pycharm新建一个文件内容如下：

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

说明：

注释：<!-- 注释内容 -->

<!--doctype对应关系-->
<!DOCTYPE html>
<!--html标签：<html></html>，只能有一个-->
<!--lang="en"：内部的属性-->
<html lang="en">
<head>
    <!--自闭和标签-->
    <meta charset="UTF-8">
    <!--标头，浏览器顶端，主动闭合标签-->
    <title>Title</title>
</head>
<body>
    <!--链接-->
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

我们可以通过浏览器打开此文件，点击百度图标实现跳转

2、Meta（metadata information）

提供有关页面的元信息，页面编码、刷新跳转、描述、更新频度等

（1）页面编码

< meta http-equiv="content-type" content="text/html,charset=utf-8" >

（2）刷新和跳转

<1> 刷新：

<meta http-equiv="Refresh" content="3">

<!--doctype对应关系-->
<!DOCTYPE html>
<!--html标签：<html></html>，只能有一个-->
<!--lang="en"：内部的属性-->
<html lang="en">
<head>
    <!--自闭和标签-->
    <meta charset="UTF-8">
    <!--3s自动刷新-->
    <meta http-equiv="Refresh" content="3">
    <!--标头，浏览器顶端，主动闭合标签-->
    <title>Title</title>
</head>
<body>
    <!--链接-->
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

<2> 跳转：

<meta http-equiv="Refresh" content="3;url=https://www.baidu.com">

<!--doctype对应关系-->
<!DOCTYPE html>
<!--html标签：<html></html>，只能有一个-->
<!--lang="en"：内部的属性-->
<html lang="en">
<head>
    <!--自闭和标签-->
    <meta charset="UTF-8">
    <!--3s自动刷新，并跳转到百度-->
    <meta http-equiv="Refresh" content="3;url=https://www.baidu.com">
    <!--标头，浏览器顶端，主动闭合标签-->
    <title>Title</title>
</head>
<body>
    <!--链接-->
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

（3）关键字

别人通过网站的关键字来搜索到此网站

< meta  name="keywords" content="哈哈，呵呵" >

（4）描述

<meta name="description" content="搜索引擎">

<!--doctype对应关系-->
<!DOCTYPE html>
<!--html标签：<html></html>，只能有一个-->
<!--lang="en"：内部的属性-->
<html lang="en">
<head>
    <!--自闭和标签-->
    <meta charset="UTF-8">
    <!--3s自动刷新，并跳转到百度-->
    <meta http-equiv="Refresh" content="3;url=https://www.baidu.com">
    <meta name="keywords" content="哈哈，呵呵" >
    <meta name="description" content="搜索引擎">
    <!--标头，浏览器顶端，主动闭合标签-->
    <title>Title</title>
</head>
<body>
    <!--链接-->
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

（5）IE兼容

<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;">

三、body介绍

1、特殊符号

&nbsp;：空格，&lt;：小于 &gt;：大于
虽然我们可以可以直接写大于号和小于号，但是这样防止于html自定义代码产生冲突！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.dreamya.top">dream&nbsp;&nbsp;&nbsp;&lt;a&gt;ya</a>
</body>
</html>

符号	命名实体	符号	命名实体
Α	Α	Β	Β
Γ	Γ	Δ	Δ
Ε	Ε	Ζ	Ζ
Η	Η	Θ	Θ
Ι	Ι	Κ	Κ
Λ	Λ	Μ	Μ
Ν	Ν	Ξ	Ξ
Ο	Ο	Π	Π
Ρ	Ρ	Σ	Σ
Τ	Τ	Υ	Υ
Φ	Φ	Χ	Χ
Ψ	Ψ	Ω	Ω
α	α	β	β
γ	γ	δ	δ
ε	ε	ζ	ζ
η	η	θ	θ
ι	ι	κ	κ
λ	λ	μ	μ
ν	ν	ξ	ξ
ο	ο	π	π
ρ	ρ	ς	&sigmaf;
σ	σ	τ	τ
υ	υ	φ	φ
χ	χ	ψ	ψ
ω	ω	ϑ	&thetasym;
ϒ	&upsih;	ϖ	ϖ
•	•	…	…
′	′	″	″
‾	&oline;	⁄	&frasl;
℘	&weierp;	ℑ	&image;
ℜ	&real;	™	™
ℵ	&alefsym;	←	←
↑	↑	→	→
↓	↓	↔	↔
↵	&crarr;	⇐	⇐
⇑	&uArr;	⇒	⇒
⇓	&dArr;	⇔	⇔
∀	∀	∂	∂
∃	∃	∅	∅
∇	∇	∈	∈
∉	∉	∋	&ni;
∏	∏	∑	∑
−	−	∗	&lowast;
√	√	∝	&prop;
∞	∞	∠	&ang;
∧	&and;	∨	&or;
∩	∩	∪	∪
∫	∫	∴	&there4;
∼	&sim;	≅	&cong;
≈	≈	≠	≠
≡	&equiv;	≤	≤
≥	≥	⊂	⊂
⊃	⊃	⊄	&nsub;
⊆	&sube;	⊇	&supe;
⊕	&oplus;	⊗	&otimes;
⊥	&perp;	⋅	⋅
⌈	&lceil;	⌉	&rceil;
⌊	&lfloor;	⌋	&rfloor;
◊	&loz;	♠	&spades;
♣	&clubs;	♥	&hearts;
♦	&diams;
¡	¡	¢	¢
£	£	¤	¤
¥	¥	¦	¦
§	§	¨	¨
©	©	ª	ª
«	«	¬	¬
		®	®
¯	¯	°	°
±	±	²	²
³	³	´	´
µ	µ

2、p、br、h和span标签

br标签：换行

所有标签分为：
    块级标签：div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
    行内标签（内联标签）：span（白板，不带属性）
标签之间可以嵌套
标签存在意义：有利于css操作，js操作
我们可以通过F12进入查看样式（代码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>123<br>45678901234567890</p>
    <p>dream</p>
    <p>dream</p>
    
    <h1>dreamya</h1>
    <h2>dreamya</h2>
    <h3>dreamya</h3>
    <h4>dreamya</h4>
    <h5>dreamya</h5>
    <h6>dreamya</h6>
    
    <span>yayaya</span>
    <span>yayaya</span>

    <div>123</div>
    <div>123</div>
</body>
</html>

在这里插入图片描述

3、input

input type='text'           ###name属性，value="dream"
input type='password'       ###name属性，value="dream"，可以隐藏显示
input type='submit'         ###value='提交' 按钮
input type='button'         ###value='登陆' 按钮

form：

发送消息给后台我们可以通过form进行发送，method有GET（通过网址一起发送过去）和POST（通过内容发送过去）,发送格式为字典！！！

<body>
<form action="网址" method="GET">
    <!--文本，name属性，可以加value：代表默认值-->
    <input type="text" name="user" value="dream" />
    <!--输入隐藏显示-->
    <input type="password" name="pwd" />
    <!--按钮-->
    <input type="button" value="login1" />
    <!--提交-->
    <input type="submit" value="login2" />
</form>
</body>

input type='radio'        ###单选框 value，checked="checked"：默认选中，name属性（只能选择一个，互斥）
input type='checkbox'     ###单选框 value，checked="checked"：默认选中，name属性（可同时选中多个）
input type="file"         ##依赖from表单的一个属性，并加入enctype="multipart/form-data"
input type="reset"        ###重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
    <div>
        <input type="text" name="user" value="dream">

        <p>性别：</p>
        <span>男：</span>
        <!--checked="checked"：默认选项-->
        <input type="radio" name="gender" value="1" checked="checked">
        <span>&nbsp;&nbsp;女：</span>
        <input type="radio" name="gender" value="2">

        <p>爱好：</p>
        <span>basketball:</span>
        <input type="checkbox">
        <span>football:</span>
        <input type="checkbox" checked="checked">
        <span>volleyball:</span>
        <input type="checkbox">
        
        <p>上传文件：</p>
        <!--enctype="multipart/form-data"：需要在form中加入-->
        <input type="file" name="filename">
    </div>
    <input type="submit" value="提交">
    <!--恢复到默认选项-->
    <input type="reset" value="重置">
</form>
</body>
</html>

4、批量写入（textarea）

<textarea>默认值</textarea>        ###name属性
eg.
<textarea name="a">content</textarea>

5、select标签

select              ###name，内部option value，提交到后台，size，multiple

<select name="province">
    <option value="1">四川</option>
    <option value="2" selected="selected">浙江</option>
    <option value="3">福建</option>
</select>

通过size显示多行，multiple（选择多个）：

<select name="province" size="6" multiple="multiple">
    <option value="1">四川</option>
    <option value="2" selected="selected">浙江</option>
    <option value="3">福建</option>
</select>

分组显示：

<select name="city" size="6">
    <optgroup label="四川">
        <option>成都</option>
        <option>广安</option>
    </optgroup>
    <optgroup label="浙江">
        <option>杭州</option>
        <option>温州</option>
    </optgroup>
</select>

6、a标签

跳转，锚：href="#某个标签的ID"，标签的ID不可以重复

<body>
    <a href="#1">电影</a>
    <a href="#2">电视剧</a>
    <a href="#3">动漫</a>
    <div id="1" style="height: 600px">我不是药神</div>
    <div id="2" style="height: 600px">我是特种兵</div>
    <div id="3" style="height: 600px">海贼王</div>
</body>

7、img标签

### scr：图片名称，要和你的脚本路径相同，或者写全路径，style：指定宽度和长度，alt：当图片找不到时所给的提示
<img src="test.jp" title="路飞" style="height: 100px;width: 100px" alt="man">

8、列表

ul
     li
ol
     li
dl
     dt
     dd

<ul>
    <li>test</li>
    <li>test</li>
</ul>

<ol>
    <li>test</li>
    <li>test</li>
</ol>

<dl>
    <dd>dddd</dd>
    <dt>dtdt</dt>
    <dt>dtdt</dt>
    <dd>dddd</dd>
    <dt>dtdt</dt>
    <dt>dtdt</dt>
</dl>

9、表格

（1）简单写法

table
	thread
		tr
			th
	tbody
		tr
			td

<table border="1">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    
    <tr>
        <td>dream</td>
        <td>男</td>
        <td>23</td>
    </tr>
</table>

（2）标准写法：

<table border="1">
    <!--表头-->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    
    <!--内容-->
    <tbody>
        <tr>
            <td>dream</td>
            <td>男</td>
            <td>23</td>
        </tr>
    </tbody>
</table>

（3）合并单元格：

colspan：横向合并单元格；rowspan：纵向合并单元格

<table border="1">
    <!--表头-->
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>

    <!--内容-->
    <tbody>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <!--<td>3</td>-->
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <!--<td>7</td>-->
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

10、lable标签

点击姓名：也能进行编辑！！！

 <label for="username">姓名：</label>
 <input id="username" type="text" name="user">

11、fieldset

<fieldset>
    <legend>登陆</legend>
    <label for="username">姓名：</label>
    <input id="username" type="text" name="user">
    <br>
    <label for="pwd">密码：</label>
    <input id="pwd" type="text" name="password">
</fieldset>

在这里插入图片描述