Web前端基础知识速看（二）HTML常用标签

最新推荐文章于 2023-04-28 23:47:17 发布

枬意

最新推荐文章于 2023-04-28 23:47:17 发布

阅读量644

点赞数 1

文章标签：前端 html css3

本文链接：https://blog.csdn.net/zzz0010/article/details/121061051

版权

首先介绍一个概念：HTML语义化

HTML语义化指的就是根据网页中内容的结构，选择合适的HTML标签进行编写，使得页面结构更加清晰。

1.标题标签 <h1>~~~<h6>

'h'即为"head" ，意为“头部、标题”。h标签有自己的样式，即加粗和字号更大。h1~h6这六个标签根据标题的重要性大小是逐次递减的，且一个h标签独占一行。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<h1>标题标签</h1>
		    <h1>标题一共六级选，</h1>
		    <h2>文字加粗一行显。</h2>
		    <h3>由大到小依次减,</h3>
		    <h4>从重到轻随之变。</h4>
		    <h5>语法规范书写后,</h5>
		    <h6>具体效果刷新见。</h6>    
             ----pink老师
	</body>
</html>

以下为这段代码的页面效果：

2. p标签 - 段落标签

<body>
		<p>我是段落</p>
		<p>我是段落我是段落</p>
</body>

3.<br/> 换行标签（单标签）

4.<strong> </strong> 加粗显示

5.<i> </i> 斜体

6.<img> 插入图片

img标签有以下属性：

（1）src属性指定图片存储的路径

这里的存储路径分为绝对路径和相对路径，关于二者的区别给大家分享一篇超详细的文章

链接在这里：相对路径和绝对路径的区别（详解）_学英语的程序员-CSDN博客_arcgis相对路径和绝对路径

（2）width属性指定我们图片的宽度,高度会等比例缩放！不要手动设置高度

（3）title属性用来设置鼠标悬停时的提示信息

（4）alt属性用来设置当我们图片加载失败的时候，显示的信息。


<body>
		<img src="images/paopao.png" width="200px" />
		<img src="images/paopao.png" title="泡泡" alt="加载失败" />
</body>

7. a标签超链接

a标签有自带的样式，默认为蓝色有下划线可以自己看一下~

特点：在原本页面上刷新，不保留原有页面

<body>
		<a href="www.baidu.com">百度</a>
</body>

如果需要在点击时打开新窗口，保留原来的页面，我们需要添加一个属性 target="_blank

<body>
<a href="" target="_blank"> </a>
</body>

8.无序列表/有序列表

无序列表<ul> //无序列表默认前面有小圆点

有序列表<ol> //有序列表默认前面有序号

<ul> 和 <ol>必须配合<li>使用，不可以单独使用。如果要去掉列表自带的样式（小圆点、序号等），可以设置display:none)

//无序列表
<ul>
<li> 序列1 </li>
<li> 序列2 </li>
<li> 序列3 </li>
</ul>
//有序列表
<ol>
<li> 序列1 </li>
<li> 序列2 </li>
<li> 序列3 </li>
</ol>

9.表单标签 form

<form action=" " ></form>

action中的内容是用户填写完表单之后提交上传的地址

10.input输入框

<input type="text">  //普通文本框
<input type="password">   //密码框（输入框加密）
<input type="radio">    //单选框
<input type="checkfox">    //复选框
<input type="file">   //上传文件
<input type="submit">   //代表提交按钮，会用在form表单内部

input输入框可以通过name属性区分不同的字段

如果两个或多个文本框属于同一个填写项，设置name属性的值相同

11.label 标签

首先有一个input标签，再有一个label标签，然后给输入框添加一个id属性(当前页面下，id是唯一的），给label添加一个for属性，值为id的值，这样就可以将文本与文本输入框连接起来。

（这样设置完以后，点击文本也可以选中选项）

12.button按钮

<button>普通按钮，页面中任何地方都可以用到</button>

13.<textarea> </textarea> 文本域（多行文本框）

cols 属性：列 rows属性：行

14.下拉列表 //select 和 option 配套使用

<select>
<option value="1">选项1</option>
<option value="2">选项2</option>   //value  存储时用的数据
</select>

15.表格标签

<table>
 <tr>
  <td>1</td>
  <td>2</td>
 </tr>
 <tr>
  <td>3</td>     //tr标签表示行，td标签表示列（行中的单元格）
  <td>4</td>
 </tr>
</table>

16.还有两个用于布局的标签 span 和 div

枬意

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端基础知识速看（二）HTML常用标签

首先介绍一个概念：HTML语义化HTML语义化指的就是根据网页中内容的结构，选择合适的HTML标签进行编写，使得页面结构更加清晰。1.标题标签 <h1>~~~<h6>'h'即为"head" ，意为“头部、标题”。h标签有自己的样式，即加粗和字号更大。h1~h6这六个标签根据标题的重要性大小是逐次递减的，且一个h标签独占一行。<!DOCTYPE html><html> <head> <meta charset=".
复制链接

扫一扫