基础框架
HTML(Hyper Text Markup Language)是超文本标记语言。它不是一种编程语言,而是一种标记语言。标记语言通常是一套成对出现的标记标签组成,开始标签、内容和结束标签称为HTML元素。
<! DOCTYPE html>
:声明html5文档。<html></html>
:html 页面的根元素,包含的是完整的html页面。<head></head>
:头部元素,包含网页编码格式和标题等信息。<meta charset = "utf-8">
:放置头部元素中,设置默认编码方式为utf-8,否则标题会乱码。<title></title>
:描述文档页面的标题。<body></body>
:包含可见的页面内容(如文本、图像、视频、音频)<h1></h1>
:定义一个内容一级标题,可以定义<h1>…<h6>
一级至六级标题。<p></p>
:定义一个段落。<!--注释内容-->
:使用Pycharm编辑器,快捷键为Ctrl+C。
基础示例:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML学习</title>
</head>
<body>
<!--定义标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<!--<br> 插入单个拆行-->
<p>HTML<br>CSS</p>
<!--<hr> 定义水平分割线-->
<hr>
</body>
</html>
HTML 字符实体
文字标签
<b></b>
或<strong></strong>
:加粗字体。<i></i>
:斜体字。<big></big>
和<small></small>
:加大和缩小字体。<sub></sub>
和<sup></sup>
:下标和上标字体。<font color="" size=""></font>
:设置颜色和字体,可以使用英文单词、rgb和十六进制三种方式设置颜色,字体大小范围为1~7。
超链接标签
<a href="">...</a>
:href参数存放连接,…存放链接文本,点击可以跳转另一个网站。
除此之外,还可以用href做弹出框,比如<a href="Javascript:void(0)" onclick="alert('人生苦短,我爱Python')">弹出框</a>
。
图像标签
<img src="" title="" alt="" width="" height="">
:src参数传入图片路径,title设置鼠标悬浮标题,alt设置图片替换文本,如图片资源加载不出来,可显示文本,宽度和高度可默认设置。
综合示例:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 文字标签、超连接、图像</title>
</head>
<body>
<!--文字格式化:加粗和斜体等-->
使用<b>加粗</b><strong>,再一次加粗,</strong><i>这个文本是斜体</i>
<br>
<big>放大</big><small>缩小</small>
<br>
展示上下标:<sub>下标</sub><sup>上标</sup>
<!--三种设置颜色方式:单词、rgb、十六进制-->
<br>
<font color="black" size="4">坚持学习!</font>
<font color="rgb(184,134,11)" size="5">坚持学习!</font>
<font color="#999999" size="7">坚持学习!</font>
<hr>
<a href="https://www.runoob.com">菜鸟教程</a>
<a href="Javascript:void(0)" onclick="alert('人生苦短,我爱Python')">弹出框</a>
<hr>
<!--默认展示图片宽高-->
<img src="1.jpg">
<!--设置图片的替换文本,未找到路径,则加载文本-->
<img src="11.jpg" alt="白鹿">
<!--指定图片宽高-->
<img src="1.jpg" width="400px" height="200px">
<!--设置标题,鼠标悬浮可显示标题-->
<img src="1.jpg" title="白鹿" width="400px" height="300px">
</body>
</html>
列表标签
<ul></ul>
:定义无序列表的父标签,默认为实心圆圈,square(方框)、circle(空心圆)、disc(实心圆)。<ol></ol>
:定义有序列表的父标签。<li></li>
:定义子列表标签展示。
块标签
<div></div>
:块级元素,一般作为网页不同区域划分。<span></span>
:内联元素,用来组合文档中的行内元素,同行显示。
列表和块示例:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表和块标签</title>
</head>
<body>
<p>Python 学习路线</p>
<ul type="square">
<li>Python 基础知识</li>
<li>Python 数据分析</li>
<li>Python 网络爬虫</li>
<li>Python 编程开发</li>
<li>Python 自动化办公</li>
</ul>
<!--<div> 将内容展示同行-->
<div>Mysql
必备知识
</div>
<ol>
<li>Mysql 基础知识</li>
<li>Mysql 增删改查</li>
<li>Mysql 存储过程</li>
</ol>
<!--<span> 将内容组合成同行-->
<span>Mysql</span>
<span>Python</span>
</body>
</html>
表格标签
<table></table>
为表格标签,有如下基本属性:
<tr></tr>
:子标签,tr 是 table row 的缩写,表示表格的一行。<td></td>
:子标签,td 是 table data 的缩写,表示表格的数据单元格<th></th>
:子标签,th 是 table header的缩写,表示表格的表头单元格。<caption></caption>
:子标签,设置表格的标题。border
:设置表格的边框。bordercolor
:设置边框的颜色。width
:设置表格的宽度。height
:设置表格的高度。align
:设置文本内容的对齐方式(left、right、center)。celspaing
:设置单元格的间隔
表格示例:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<p>制作一个表格</p>
<table border="1" bordercolor="blue" align="center">
<caption>学习路线</caption>
<tr>
<th>tool</th>
<th>info</th>
</tr>
<tr>
<td>Python</td>
<td>数据分析</td>
</tr>
<tr>
<td>Mysql</td>
<td>增删改查</td>
</tr>
</table>
</body>
</html>
表单标签
HTML 表单用于收集用户的输入信息,表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。在实际生活中,最常见的就是问卷调查和账号登入。
语法为<form><form>
,常见属性如下:
- action:提交到服务器的地址。
- method:提交采用的方式(get和post)。
<label></label>
:元素用于为表单元素添加标签,提高可访问性。<input>
:元素是最常用的表单元素之一,它可以创建文本输入框、密码框、单选按钮、复选框等。type
属性定义了输入框的类型,id
属性用于关联<label>
元素,name
属性用于标识表单字段。type="text"
:文本输入项。type="password"
:密码输入项。type="radio"
:单选输入项。type="checkbox"
:多选输入项。type="email"
:邮箱输入项。type="file"
:文件输入项。type="button"
:普通按钮。type="submit"
:提交按钮。type="reset"
:重置按钮。
<select></select>
:下拉列表项,子标签为<option></option>
。
表单示例:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<h3>表单</h3>
<form action="/" method="post">
<!--文本输入框-->
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<!--密码输入框-->
<label for="psd">密码:</label>
<input type="password" id="psd" name="psd" size="20" required><br>
<!--单选按钮-->
<label>性别:</label>
<label for="male">男</label>
<input type="radio" id="male" name="gender" checked>
<label for="female">女</label>
<input type="radio" id="female" name="gender"><br>
<!--多选按钮-->
技能:<input type="checkbox">Python
<input type="checkbox">Mysql
<input type="checkbox">Java
<input type="checkbox">C++<br>
<!--下拉列表-->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select><br>
<!--邮箱输入-->
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<!--文件输入-->
<label for="file">文件:</label>
<input type="file" id="file" name="file"><br>
<!--提交按钮-->
<input type="submit" value="提交">
<!--重置按钮-->
<input type="reset" value="重置">
</form>
</body>
</html>
音频和视频标签
<audio></audio>
为音频标签,<video></video>
为音频标签,常见属性值如下:
- src:文件路径。
- autoplay:自动播放。
- controls:显示进度控制条。
- loop:循环播放。
- width和height:宽度和高度。
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音频和视频标签</title>
</head>
<body>
<h3>姑娘你别哭泣</h3>
<audio src="柯柯柯啊 - 姑娘别哭泣.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
<h3>凡人修仙80集预告</h3>
<video src="凡人修仙80集预告.mp4" width="500px" height="300px" autoplay="autoplay" controls="controls" loop="loop"></video>
</body>
</html>
框架标签
<frameset></frameset>
为框架标签,可以将多个HTML合并在一起,常见的合并有横向、纵向和混合合并,属性如下:
- rows:按照行横向合并,根据填写的百分比进行划分合并。
- cols:按照列纵向合并,根据填写的百分比进行划分合并。
<frame src="">
:子标签,用户显示具体的页面内容,src为文件路径。