网站导航
> 文章列表 > 【自用】HTML笔记

【自用】HTML笔记

网友: 文章列表 2024-03-21 18:25:58

【自用】HTML笔记

看视频做的笔记：https://www.bilibili.com/video/BV1eb411n7AL?p=25&vd_source=774b01e6e991da71d49ca097f52b69ee

第一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body>Hello World!
</body>
</html>

注：head标签里一般放一些引用文件。
body标签里放具体的内容。
【自用】HTML笔记

一、常用标签

1.1段落标签

段落标签用<p>段落内容</p>
例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><p>段落一</p><p>段落二</p><p>段落三</p>
</body>
</html>

【自用】HTML笔记

1.2 不同的标题标签

标题一标签用<h1>标题一</h1>
标题二标签用<h2>标题二</h2>
标题三标签用<h3>标题三</h3>
以此类推。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><h1>标题一</h1><p>段落一</p><p>段落二</p><p>段落三</p><h2>标题二</h2><p>段落一</p><p>段落二</p><p>段落三</p><h3>标题三</h3>
</body>
</html>

【自用】HTML笔记

1.3 换行标签（单标签）

使用<br/>
例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><h1>标题一</h1><p>段落一</p><br/><br/><p>段落二</p><p>段落三</p><h2>标题二</h2><p>段落一</p><p>段落二</p><p>段落三</p><h3>标题三</h3>
</body>
</html>

【自用】HTML笔记

1.4 分割线标签（单标签）

使用<hr/> 直接放在需要分隔开的地方，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body><h1>标题一</h1><p>段落一</p><hr/><p>段落二</p><hr/><p>段落三</p><h2>标题二</h2><p>段落一</p><p>段落二</p><p>段落三</p><h3>标题三</h3>
</body>
</html>

【自用】HTML笔记

1.5 a标签（可跳转）

使用<a></a>
例如，添加一个百度的可跳转链接

<a href="https://www.baidu.com">百度</a>

效果：
【自用】HTML笔记
如果希望不跳转到任何地方，href中内容可替换为#，例如：

<a href="#">百度</a>

1.6 在其他标签中使用标签link

例如，希望标题一可以跳转到百度，则可以在h1标签中嵌入a标签以及将对应的href属性赋值为百度的网址。代码如下：

<h1><a href="https://www.baidu.com">标题一</a></h1>

【自用】HTML笔记

1.7 网页的title标签

只需要在head标签中添加一个title标签即可。

<head><meta charset="UTF-8"><title>网页的头标题</title>
</head>

【自用】HTML笔记

1.8 添加注释

使用<!----> 例如：

<!--这是一条注释-->

1.9 显示图片

在body中使用标签imgs，例如：

<img src="123.jpg" alt="漩涡鸣人">

src表示源路径，此时为将123.jpg与该html代码放在同一目录下，alt为当把鼠标放到图片上时显示的内容，如果没有显示也不要奇怪，只是不同浏览器显示方式有所不同。
【自用】HTML笔记
可以看到此时，图片过大，可以修改属性为：

<img src="123.jpg" alt="漩涡鸣人" width="400px" height="200px">

注：px为像素单位。
【自用】HTML笔记

1.10 表格

使用table标签，tr表示行，td表示列，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><!--border为表边界的宽度--><table border="2"><!--tr表示行,td表示列--><tr><td>id</td><td>name</td><td>job</td></tr><tr><td>1</td><td>张三</td><td>医生</td></tr><tr><td>2</td><td>李四</td><td>教师</td></tr></table>
</body>
</html>

【自用】HTML笔记

1.11 有序列表和无序列表

无序列表使用标签ul，然后在列表里嵌入li标签。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><ul><li>第一行无序列表</li><li>第一行无序列表</li><li>第一行无序列表</li></ul>
</body>
</html>

【自用】HTML笔记
有序列表，只需把ul改为ol。例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><ul><li>第一行无序列表</li><li>第一行无序列表</li><li>第一行无序列表</li></ul><ol><li>第一行有序列表</li><li>第一行有序列表</li><li>第一行有序列表</li></ol>
</body>
</html>

1.12 自定义列表

使用dl表示自定义标题，dt+dd为一组。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><dl><dt>标题一</dt><dd>标题一下的内容</dd><dt>标题二</dt><dd>标题二下的内容</dd><dt>标题三</dt><dd>标题三下的内容</dd></dl>
</body>
</html>

【自用】HTML笔记

二、常用form表单元素

创建一个form标签，然后在标签内添加内容。

2.1 输入文本框（type=text）

创建一个可见输入文本框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=text为文本框--><input type="text"></form>
</body>
</html>

可以在文本框里输入一些数据：
【自用】HTML笔记
如果需要给 文本框添加一个标签，则需要添加一个label标签。并在label标签里使用for绑定文本框的id，并且在label标签里写需要显示的内容，比如要显示成name：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=text为文本框--><label for="name-input">name</label><input id="name-input" type="text"/></form>
</body>
</html>

【自用】HTML笔记
如果需要输入文本框里的数据是不可见的，则需要将input的type改为“password”。
例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=text为文本框--><label for="name-input">name</label><input id="name-input" type="text"/><br/>  <!--br为换行标签--><label for="pwd-input">password</label><input id="pwd-input" type="password"/></form>
</body>
</html>

【自用】HTML笔记

2.2 单选框（type=radio）

例如，选择男女性别时用到单选框。name相同表示他们为同一组。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=radio为单选框--><label for="h-male">男</label><input id="h-male" type="radio" name="sex"/><label for="h-female">女</label><input id="h-female" type="radio" name="sex"/></form>
</body>
</html>

【自用】HTML笔记
如果需要隔开一定距离，可以在label中添加：&nbsp;
一个&nbsp; 代表一个空格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=radio为单选框--><label for="h-male">&nbsp;&nbsp;男</label><input id="h-male" type="radio" name="sex"/><label for="h-female">&nbsp;&nbsp;女</label><input id="h-female" type="radio" name="sex"/></form>
</body>
</html>

【自用】HTML笔记

2.3 多选框（type=checkbox）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=radio为单选框--><label for="h-football">&nbsp;&nbsp;足球</label><input id="h-football" type="checkbox" name="hobbies"/><label for="h-basketball">&nbsp;&nbsp;篮球</label><input id="h-basketball" type="checkbox" name="hobbies"/><label for="h-pingpong">&nbsp;&nbsp;乒乓球</label><input id="h-pingpong" type="checkbox" name="hobbies"/></form>
</body>
</html>

【自用】HTML笔记

2.4 普通按钮和提交按钮

提交按钮可以是提交整个表单的内容，注意提交按钮的type=submit，可以这样写：

<input type="submit" value="提交">

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=radio为单选框--><label for="h-football">&nbsp;&nbsp;足球</label><input id="h-football" type="checkbox" name="hobbies"/><label for="h-basketball">&nbsp;&nbsp;篮球</label><input id="h-basketball" type="checkbox" name="hobbies"/><label for="h-pingpong">&nbsp;&nbsp;乒乓球</label><input id="h-pingpong" type="checkbox" name="hobbies"/><input type="submit" value="提交"></form>
</body>
</html>

【自用】HTML笔记
普通按钮可以写在表单外，例如创建一个普通按钮，并让其单击时跳转到百度：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><!--id表示给其取一个唯一的名字，type=radio为单选框--><label for="h-football">&nbsp;&nbsp;足球</label><input id="h-football" type="checkbox" name="hobbies"/><label for="h-basketball">&nbsp;&nbsp;篮球</label><input id="h-basketball" type="checkbox" name="hobbies"/><label for="h-pingpong">&nbsp;&nbsp;乒乓球</label><input id="h-pingpong" type="checkbox" name="hobbies"/><input type="submit" value="提交"></form><button onclick="javascript:window.location='https://www.baidu.com'">普通按钮</button>
</body>
</html>

【自用】HTML笔记

2.5 多行文本框（textarea）

创建一个3行10列的文本框，并用p标签分成不同的段落。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><p><textarea  cols="10" rows="3"></textarea></p><p><input type="submit" value="提交"></p></form>
</body>
</html>

【自用】HTML笔记

2.6 单选下拉框

使用select标签，选项使用option标签。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><p><label for="province">省份&nbsp;&nbsp;</label><select name="" id="province"><option value="">广东</option><option value="">广西</option><option value="">湖南</option><option value="">湖北</option></select></p><p><input type="submit" value="提交"></p></form>
</body>
</html>

【自用】HTML笔记
如果希望下拉列表有一个默认值，也就是初始时显示的省份，以默认显示湖北为例，可以在湖北所在的标签内添加一个“selected”，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><form action=""><p><label for="province">省份&nbsp;&nbsp;</label><select name="" id="province"><option value="">广东</option><option value="">广西</option><option value="">湖南</option><option value="" selected>湖北</option></select></p><p><input type="submit" value="提交"></p></form>
</body>
</html>

【自用】HTML笔记

三、划分不同区块

例如，想要做成报纸一样，左右，垂直方向都要有布局，这时就需要使用div标签。

3.1 上下分段布局（div）

h1表示是标题，div划分为某一块，可以设置style属性来决定区块的宽和高。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width: 400px;"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><div style="width: 400px;"><p>高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。</p></div>
</body>
</html>

【自用】HTML笔记

3.2 内联标签span

使用span标签可以让内容水平分布。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width: 400px;"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><span>第一部分</span><span>第二部分</span>
</body>
</html>

【自用】HTML笔记
由于span标签是一种内联标签，所以可以嵌入段落里，例如要将上面的一个段落里的“高质量发展”显示成红色，则可以这样修改：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width: 400px;"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、<span style="color:red">高质量发展</span>，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><span>第一部分</span><span>第二部分</span>
</body>
</html>

【自用】HTML笔记

3.3 float的使用

需要将div的区块里的style做一些修改。需要添加一个float属性，并且设置成靠左还是靠右布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width: 400px;float: left"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><div style="width: 400px;float: left"><p>高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。</p></div>
</body>
</html>

【自用】HTML笔记

3.3.1 float特性1

div之外可以再嵌套div，并且可以将不同区块设置不同的背景颜色便于观察。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width:900px;background-color: grey"><div style="width: 400px;float: left; background-color: green"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><div style="width: 400px;float: left; background-color: cadetblue"><p>高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。</p></div></div>
</body>
</html>

【自用】HTML笔记

3.3.2 float特性2-采用百分比约束布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width:900px;height:500px;background-color: grey"><div style="width: 50%;float: left; background-color: green"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><div style="width: 49%;float: left; background-color: cadetblue"><p>高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。</p></div></div>
</body>
</html>

【自用】HTML笔记

3.4 图片也可以使用float方式布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--这是一条注释--><title>网页的头标题</title>
</head>
<body><h1>民营企业要积极投身高质量发展</h1><div style="width:900px;height:500px;background-color: grey"><img src="123.jpg" alt="旋涡鸣人" style="width:500px;height:300px;float: left"><div style="width: 50%;float: left; background-color: green"><p>“民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。</p></div><div style="width: 49%;float: left; background-color: cadetblue"><p>高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。</p></div></div>
</body>
</html>

【自用】HTML笔记

网络标签：

相关问题