初识HTML

最新推荐文章于 2024-08-24 11:15:50 发布

￥兔似锦

最新推荐文章于 2024-08-24 11:15:50 发布

阅读量395

点赞数 9

文章标签： html

本文链接：https://blog.csdn.net/weixin_44849938/article/details/103730778

版权

HTML文档格式

// 文档格式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档标题</title>
	</head>
	<body>
		文档内容......
	</body>
</html>

注意：所有内容都写到body标签里面

常用的HTML标签

注释

// 注释
<!--我是HTML中的注释-->

单标签

// 单标签
<br />  <!--换行-->
<hr />  <!--下划线-->
<link />  <!--引用外部样式资源-->
<img /> <!--图片标签-->
<input /> <!--输入框-->

双标签

// 双标签
<html></html> <!--创建一个HTML文档-->
<head></head> <!--设置文档标题和其它在网页中不显示的信息-->
<title></title> <!--设置文档的标题  -->
<script></script> <!--JavaScript脚本标签  -->    
<h1></h1>--<h6></h6>  <!--标题标签（总6级） --> 
<p></p>
<label></label>    
<em></em>  <!--强调文本(通常是斜体加黑体)-->
<strong></strong> <!--加重文本(通常是斜体加黑体)-->
<a></a>  <!--超链接-->
<table></table>  <!--表格-->
<tr> </tr><!--行-->
<td></td> <!--列-->
<form></form>  <!--form表单-->
<button></button> <!--按钮标签-->
<div></div> <!--块元素-->

标题标签

// 标题标签
<h1>荷椰壹笙</h1>
<h2>荷椰壹笙</h2>
<h3>荷椰壹笙</h3>
<h4>荷椰壹笙</h4>
<h5>荷椰壹笙</h5>
<h6>荷椰壹笙</h6>

注意：h1最大，h6最小；递减效果

文本标签

// 标题标签
<p></p>  //段落标签
<em></em> //强调文本(通常是斜体加黑体)
<strong></strong> //加重文本(通常是斜体加黑体)
<s></s> //删除线
<br/>  //换行
<hr/>  //下划线

列表标签

有序列表

// 有序列表
<ol>
	<li>荷椰壹笙</li>
	<li>荷椰壹笙</li>
</ol>

无序列表

// 无序列表
<ul>
	<li>荷椰壹笙</li>
	<li>荷椰壹笙</li>
</ul>

超链接

// 超链接
	<a href="https://vxmf.cn">外链接</a>  //href里是跳转地址

图片标签

// 图片标签
	<img src="xxx.jpg" />  //src里是图片地址

表格标签

//  表格标签
<table>
	<tr>  <!--tr行-->
		<td>昵称</td>    <!--td列-->
		<td>姓名</td>
	</tr>
	<tr>
		<td>荷椰壹笙</td>
		<td>荷椰壹笙</td>
	</tr>
</table>

Form表单

// Form表单
<form action="xxxxxx" method="post"> <!--action是提交地址，method是提交方式-->
	账号：<input type="text" name="name" />
	密码：<input type="password" name="sex" />
		  <button type="submit">提交</button>
</form>

块元素

// 块元素
	<div>荷椰壹笙</div>

扩展知识

块级元素标签

// 块级元素
	<div></div>
	<h1></h1>--<h6></h6>
	<p></p>
	<hr/>
	<br/>
	<ul>
		<li></li>
	</ul>
	<ol>
		<li></li>
	</ol>
<table>...</table> 
<form>...</form>

行内元素标签

// 行内元素
<a></a>
<em></em>
<strong></strong>
<label></label>
<img />
<input />

注意：HTML代码从上往下走（注意代码写的地方）

程序员必备技能(“我来写代码了”)

复制：Ctrl + C
剪切：Ctrl + X
粘贴：Ctrl + V
撤销：Ctrl + Z

￥兔似锦

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

目录HTML文档格式常用的HTML标签注释单标签双标签标题标签文本标签列表标签有序列表无序列表超链接图片标签表格标签Form表单块元素扩展知识块级元素标签行内元素标签程序员必备技能("我来写代码了")HTML文档格式// 文档格式<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
复制链接

扫一扫