编码方式声明
<meta charset='编码方式'>
常见的有ASCII、GB2312、Unicode、UTF-8
charset 设置 正确ansi.html 保存源文件的编码是ANSI,源文件中没有声明编码方式,浏览器自动解析
charset 设置 正确 utf-8.html 源文件与声明的编码方式都是UTF-8
charset 设置错误.html 保存源文件的编码是ANSI,源文件声明为UTF-8编码方式,出现乱码
标题标签
<h1></h1>到<h6></h6>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
效果展示:

段落、段内换行、空格
<p></p>为段落符
<br />为段内换行
为空格
在段落中会自动忽略空格和换行符需要添加对应的格式方可。
<body>
<p>
HTML的全称为超文本标记语言,是一种标记语言。
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
</p>
</body>

加上有关的标签以后:
<body>
<p>
HTML的全称为超文本标记语言,<br />
是一种标记语言。<br />
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。<br />
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。<br />
</p>
</body>

预留格式
<per> </per>
预留格式,里面的内容会直接显示,多用于代码显示。
<body>
<pre>
public class Hello {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
</body>

水平线、注释
<hr /> 是水平线,用于添加一条横线
<!-- --> 注释,用于注释内容给编程人员看
<body>
<p>
这里是注释
<hr />
这里是水平线
</p>
</body>

超链接
<a href="网址" > 链接内容</href>
超链接可以链接内容:
<body>
<a href="https://www.baidu.com/">百度一下</a> <br />
<a href="01.html">站内网页</a> <br />
<a href="#">虚拟地址</a> <br />
</body>

图像标签
网页常见格式:jpg、gif、png等
<img src="路径" alt= "文件名" />
其中路径可以是相对路径也可以是绝对路径
<body>
<img src="./images/python.png" alt="python">
<img src="C:home/images/python.png" alt="python">
</body>

区域设置
<div>用于设置区域,也是板块,元素组合。
这一个区域可以设置固定的内容/样式,以便于管理。
后期有css以后可以方便处理
有序、无序列表
<ul>无序列表
<ol>有序列表
<li>列表项
<body>
<ul>
<li>python</li>
<li>java</li>
<li>C语言</li>
</ul>
</body>

<body>
<ol>
<li>python</li>
<li>java</li>
<li>C语言</li>
</ol>
</body>

表格
table表格
tr
td
th
<body>
<table>
<tr>
<th>代码</th>
<th>含义</th>
</tr>
<tr>
<td>print</td>
<td>打印输出</td>
</tr>
<tr>
<td>input</td>
<td>输入</td>
</tr>
</table>
</body>

添加边框
在table中添加 border="1"内容
<body>
<table border="1">
<tr>
<th>代码</th>
<th>含义</th>
</tr>
<tr>
<td>print</td>
<td>打印输出</td>
</tr>
<tr>
<td>input</td>
<td>输入</td>
</tr>
</table>
</body>

表单
表单下面有表单元素包括了:文本框、按钮、单选、复选、下拉列表、文本域等
<form action="后端数据处理页面">
文本框、密码框、按钮
<imput type="text | password | submit | reset | radio |checkbox ">
type="text" 文本框(明文显示)
type="password" 密码框(密文显示,*显示)
一般里面会加一个name属性,用于定义名称给后端进行处理,这里就不演示了
<body>
<form action="xxx">
账号:<input type="text"> <br />
密码:<input type="password">
</form>
</body>

submit 确定按钮
reset 重置按钮
value 定义按钮文字
<body>
<form action="xxx">
账号:<input type="text">
<input type="submit" value="确定">
<input type="reset" value="重置">
<br>
密码:<input type="password">
<input type="submit" value="确定">
<input type="reset" value="重置">
</form>
</body>

单选框、复选框
radio 单选框
bceckbox 复选框
value 提交给后台的值
checked 默认选中
<body>
<form action="xxx">
性别:男<input type="radio" value="1" name="gender" >
女<input type="radio" value="1" name="gender" > <br />
国籍:中国<input type="checkbox" value="0" name="music" checked="checked">
</form>
</body>

下拉列表框
<select> 下拉列表框
<option> 选项
selted 默认选择
<body>
<form action="xxx">
最常用语言:
<select name="live" id="data">
<option value="python" selected="selected">python</option>
<option value="java">java</option>
<option value="">C语言</option>
<option value="">C++</option>
<option value="">R语言</option>
</select>
</form>
</body>

文本域
<textarea rows="行数" cols="列数" >文本 </textarea>
<body>
<form action="xxx">
个人简介:<br />
<textarea name="xxxx" id="xxxx" cols="50" rows="10">
在这里输入内容……
</textarea>
<br />
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>

Html的大致内容都在上面了,只要是经常使用的一些基本标签,如果还有一些没有描述的常用的可以进行百度,建议根据H5的要求使用web语义话的方式进行书写。 |