HTML基础标签

首先我们在编写HTML页面的时候

都会有这个界面

首先我们先要了解各部分分别是什么意思

首先

<!DOCTYPE html>
<!-- html5的标识，告诉浏览器这是一个html5的页面，请按照解析html5的方式解析 -->

这样浏览器就可以识别HTML了

其次

<head>

</head>
<head><!-- 头部 -->
这是HTML的头部标签


然后

<meta charset="utf-8">

　　这是解析的编码格式

其中含有

<!-- meta元标签 
   charset（属性） 编码格式 
    utf-8：属性值 几乎包含了200多种语言里面的所有字符 -->
   <!--  GB-2312国家标准
    GBK国家标准扩展包 -->


然后

<body>

</body>

　　主体

 

 

我们编写一个代码来分别介绍HTML的基础标签

<!DOCTYPE html>
<!-- html5的标识，告诉浏览器这是一个html5的页面，请按照解析html5的方式解析 -->
<html>
<!-- 开标签 -->
<head><!-- 头部 -->
	<meta charset="utf-8">
	<!-- meta元标签 
		charset（属性） 编码格式 
		 utf-8：属性值 几乎包含了200多种语言里面的所有字符 -->
		<!--  GB-2312国家标准
		 GBK国家标准扩展包 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Hello World</title>
</head>
<body><!-- 主体 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<img src="https://n.sinaimg.cn/sports/transform/282/w650h432/20211102/03fa-905413ccea6604b409c735c8a5b8b33f.png">

<hr>
<input type="text" name="">
<hr>
<input type="number" name="">
<hr>
<input type="password" name="">
<hr>

性别:
<input type="radio" name="gender">男
<hr>
<input type="radio" checked  name="gender">男
<hr>
<!-- checked 默认选中 -->
<!-- gender -->
<input type="radio" name="gender">女
<hr>

兴趣爱好:
<hr>
<input type="checkbox" name="">足球
<hr>
<input type="checkbox" name="">足球
<hr>
<input type="checkbox" name="">足球
<hr>

<!-- 无序列表 -->
<ul type="square"><!-- circle -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ul>
<hr>

<ul type="circle"><!-- square -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ul>
<hr>

<!-- ol有序列表 -->
<ol type="a"> <!-- A，I，i -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ol>
<hr>

<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
<!-- 闭标签 -->

　　首先h1，h2，h3 和p标签

h是各级标题  p标签不能共处一行

效果如图所示

 

然后

input标签的三种类型

1，text       文本

2，number     只能输入数字

3，password    输入密码，隐藏信息

 

效果如图所示

 

    

像输入框默认选中

性别:
<input type="radio" name="gender">男
<hr>
<input type="radio" checked  name="gender">男
<hr>
<!-- checked 默认选中 -->
<!-- gender -->

　　默认选中为checked

页面效果如图所示

 

　　可以被选中的方形选框

代码如下

兴趣爱好:
<hr>
<input type="checkbox" name="">足球
<hr>
<input type="checkbox" name="">足球
<hr>
<input type="checkbox" name="">足球
<hr>

　　页面效果为

 

列表分为

ul有序列表

ol无序列表

 

代码如下 

<!-- 无序列表 -->
<ul type="square"><!-- circle -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ul>
<hr>

<ul type="circle"><!-- square -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ul>
<hr>

<!-- ol有序列表 -->
<ol type="a"> <!-- A，I，i -->
<li>aaa</li>	
<li>bbb</li>
<li>ccc</li>
</ol>
<hr>

　　页面效果如下

 

 

 

 

posted @ 2021-12-24 14:09  doudou帅  阅读(46)  评论(0)    收藏  举报