亚博体育初识HTML!

当亚博体育yb9461初识HTML应该怎么快速掌握
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代码从上往下走(注意代码写的地方

猜你喜欢

转载自blog.51cto.com/14654265/2462851