HTML基础标签详解
今天我们来简单的学习一下html的标签
一、先说明下html的头部可以定义哪些内容和作用
头部【head】
设置内容
1、<meta charset="UTF-8">，设置html的编码格式为utf-8
2、<title>Title</title>，设置html文档的标题，在浏览器上显示的名字
3、<meta http-equiv="X-UA-Compatible" content="IE=edge">，主要为了兼容ie浏览器，因为ie浏览器
没有完全遵守w3，所有ie对html的渲染支持的不够友好。
4、<meta name="viewport" content="width=device-width,inital-scale=1.0">，这个主要是为了兼容其
他的页面，比如手机，这里的意思html文件的大小和设备大小一致，且不进行缩放
5、
资源引入
1、<link rel="stylesheet" href="css1.css">，引入一个css文件
2、<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">，引入一个小图标，在浏览器的窗口上
二、下面我们正式进入标签的学习，也就是body中定义的内容
1、h标签
1、h标签，标题的标签，h标签从1到6，分别为一级标题。。。。。。六级标题，一级标题字体最大
示例：
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
2、p标签
2、p标签，段落的标签，其中br标签的效果就是换行的意思
示例：
<p>这是一个段落的标签</p>
<p>这是一个有换行<br>的段落的标签</p>
3、a标签
3、a标签，超链接的标签
<p>
<a href="http://www.baidu.com">百度一下</a>
</p>
上面这个例子是在当前页面打开超链接指向的地址
<p>
<a href="http:www.baidu.com" target="_blank">百度一下</a>
</p>
上面这个例子打开超链接会重新打开一个窗口
4、img标签
4、img标签，他是自闭和的标签，渲染一个图片
<img src="1.ico">
<p>
<img src="1.JPG">
</p>
<p>
<img src="1.JPG" alt="帅哥">
</p>
alt这个属性的意思就是如果有些浏览器不允许加载图片，如果出现这种情况，则图片的位置处会显示帅哥这个单词
<p>
<img src="1.JPG" alt="帅哥" width="100px" height="200px">
</p>
这样的效果就是显示图片的宽度是100像素，高度是200像素，图片尽量不要放大，因为会失真
<p>
<a href="http://www.baidu.com">
<img src="1.ico">
</a>
</p>
这样的效果就是用图片做超链接的按钮，点击这个图片会跳转href指向的地址
5、ul标签
5、ul标签，产生一个列表的效果，且没有序号
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>面包</li>
<li>牛奶</li>
<li>羊奶</li>
</ul>
6、ol标签
6、ol标签，产生一个列表的效果，且有序号
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>面包</li>
<li>牛奶</li>
<li>羊奶</li>
7、table标签
7、table标签，产出一个类似excel的表格
<table>
<thead>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列:H1</td>
<td>第二列:H1</td>
<td>第三列:H1</td>
</tr>
<tr>
<td>第一列:H2</td>
<td>第二列:H2</td>
<td>第三列:H2</td>
</tr>
</tbody>
</table>
thead的表头，tbody是表的数据，其中table的属性border="1"是给表格加一个框
<table>
<thead>
<caption>简单的表格</caption>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一列:H1</td>
<td>第二列:H1</td>
<td>第三列:H1</td>
</tr>
<tr>
<td>第一列:H2</td>
<td>第二列:H2</td>
<td>第三列:H2</td>
</tr>
</tbody>
</table>
<caption>简单的表格</caption>这个的意思就是给这个表格取一个名字，表格的名字就叫做“简单的表格”，这个非必须要写的
colspan="3" 这个是合并单元格，横向合并，一个格占三个格
rowspan=“2” 这个是合并单元格，纵向合并，一个格占2个格
table不建议做布局，table我们经常用创建表格，这个是最好的
8、from标签
8、Form标签，下面这些标签通常在Form标签中使用
a、label标签
<label for="ttt">用户名</label>
<input id="ttt" type="text">
<hr/>
<label for="fff">请选择</label>
<input id="fff" type="checkbox">
<hr/>
<label for="ddd">请选择</label>
<input id="ddd" type="radio">
这个的效果是label这个标签会应用到for指向的id的标签上，比如上面的第一个例子，label的for指向ttt，那么如果我们点击用户名，则鼠标会放到
input的type的输入框中，下面的2个例子也一样，点击请选择，会选中后面的复选框
b、input标签
<label for="ttt">用户名</label>
<input id="ttt" type="text" name="user_name" value="用户名">
这里的实际传递到后台是一个dict，k的值为user_name,value的值为输入的值
<hr/>
<label for="12">密码</label>
<input id="12" type="password" name="user_pwd" value="密码">
这里的实际传递到后台的是一个dict，k的值为password，value的值是在输入框的提示的值
<hr/>
男：<input type="radio" name="sex">
女：<input type="radio" name="sex">
radio实现的效果是单选的效果，如果name相同的标签中，只能选择一个
<hr/>
足球：<input type="checkbox" name="hob">
篮球：<input type="checkbox" name="hob">
checkbox实现的效果是多选框
<hr/>
<input type="text" name="用户名"><input type="button" value="提交">
<hr/>
<input type="password"><input type="submit" value="提交">
c、select标签
<select>
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option>北伐军4</option>
</select>
实现的效果就是实现一个下拉框，且默认只显示一个，且只可以选择一个，且无默认选中值
<select size="2">
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option>北伐军4</option>
</select>
实现的下过就是实现一个下拉框，且默认显示两个，且只可以选择一个，且无默认选中值
<select size="2" multiple="multiple">
<option>北伐军1</option>
<option>北伐军2</option>
<option>北伐军3</option>
<option selected="selected">北伐军4</option>
</select>
实现的效果实现一个下拉框，每次显示2个，且可以多选，且默认选中值为北伐军4
<select>
<optgroup label="第一集团军">
<option>北伐军1</option>
<option>北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option>北伐军3</option>
<option>北伐军4</option>
</optgroup>
</select>
实现的效果就是实现一个下拉框，按照选项进行了分类
d、按钮
<form action="http://www.baidu.com" method="post">
<input type="text">
<br>
<button type="button">button提交</button>
<button type="submit">submit提交</button>
<button type="reset">reset重置</button>
</form>
实现的效果就是提交数据到action指定的地址，用post的方式进行提交，button的不会提交给后台，只有submit才会提交给后台，reset是清空
text输入框的内容
9、div和span标签
div
span
<div>这是一个div元素的内容</div>
<!--div是一个块级标签-->
<span>这是一个span元素的内容</span>
<!--实盘这是一个内联标签-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
