html最常用的标签

最新推荐文章于 2022-07-26 17:07:39 发布

置顶 biu_bin

最新推荐文章于 2022-07-26 17:07:39 发布

阅读量255

点赞数 1

分类专栏： heml

本文链接：https://blog.csdn.net/biu_bin/article/details/90523188

版权

heml 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

对于HTML初学者来说，掌握并且灵活运用标签是很难的一门功课，今天我们来盘点盘点html标签的那些事。

勤加练习是掌握好标签的捷径。
head标签： 文档的头部描述了文档的各种属性和信息，包括文档的标题等。
title标签： 只能放在head标签中，如下：

<head>
   <title>...</title>
</head>

body标签： 页面上需要展示的内容放在body标签中


    <body>...网页上要展示的页面内容...</body>

p标签： 段落文本
hx标签：网页的标题，有六种如下：

<head>
  <title>hx标签介绍</title>
</head>
  <body>
    <h1>一级标题</h1>
        <h2>二级标题</h2>
            <h3>三级标题</h3>
                <h4>四级标题</h4>
                    <h5>五级标题</h5>
                        <h6>六级标题</h6>    
  </body>

strong和em标签： 增强语气，用它们修饰的字体分别是粗体和斜体的表现形式。

<body>
  <strong>..粗体.</strong>
  <em>..斜体.</em>
</body>

span标签： 它的作用是设置单独的样式，一般和css，js配合使用
q标签： 对简短的文本引用，比如说引用一句名言就用到p标签。p标签的真正关键点不是它的默认样式双引号（如果是这样，直接在键盘上输入就行了），而是它的语义：引用别人的话。
blockquote标签： 长文本引用。
br标签： 在需要换行的地方加上br标签，相当于键盘上的回车

<h2>静夜思</h2>
<p>
床前明月光,<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。
</p>

&nbsp标签： 一个&nbsp；相当于一个空格
ul标签： 添加新闻信息列表
举例：

<ul>
  <li>五一四天假</li>
  <li>端午五天假<li>
  ......
</ul>

页面显示：

五一四天假
端午五天假

ol标签： 添加图书销售排行榜
举例：

<ol>
  <li>java基础入门<li>
  <li>java web程序开发<li>
  <li>html+css+js基础入门<li> 
</ol>

页面显示：

java基础入门
java web程序开发
html+css+js基础入门

div标签： 相当于一个容器，将同一板块的的内容放在容器，方便操作和阅读，同时还可以给这个容器命名，如下：

<div id=“板块名称”>...</div>

table标签： 表格标签

1.<table>...</table>:整个表格以<table>标记开始，</table>标记结束
2.<tr>...</tr>:表格的一行，所以有几对tr表格就有几行。
3.<th>...</th>:表格的一个单元格，一对tr里面有几对th就说明有几列。

<table>
 <tr>
  <th>产品名称</th>
  <th>品牌</th>
 </tr>
 <tr>
  <th>耳机</th>
  <th>联想</th>
  </tr>

</table>

产品名称	品牌
耳机	联想

a标签： a标签的五个作用（1.超链接 2.锚点 3.打电话 4.发邮件 5.协议限定符）

1.超链接：<a herf="网址地址" target="_blank"> 用户看到的信息</a>（target="_blank–>在新的页面打开网址）
2.锚点： 跳转到页面上div标识的指定位置<div id="one" style=""></div> <a herf="#one"></a>
3.打电话：<a herf="tel:188 8888 8888">给biu打电话</a>
4.发邮件：<a herf="2681331464@qq.com">给biu发邮件</a>
5.协议限定符：<a herf="javascript:while(1){alert("说了不要你点")}">你点一下试试</a>

img标签： 为网页插入图片

 <img scr="图片地址" alt="下载失败时替换文本" title="鼠标滑过提示的文本">

表单（form）标签&输入框 可以把浏览者输入的数据传送到服务器端

<form method="post"  action="save.php">
  <label for="username">用户名：</label>
  <input type="text" name="username"/>
  <label for="pass">密码：</label>
  <input type="password" name="pass"/>
</form>

讲解：1.form:form标签是成对出现的，以<form>开始，以</form>结束
2.action：浏览者输入的数据被传送到的地方比如一个PHP页面（save.php）
3.methon:传送数据的方式（get/post）
4.type：当type="text"时，输入框为文本输入框
当type="password"时，输入框为密码输入框
5.name:为文本框命名
6.value：为文本输入框设置默认值

文本域： 当用户需要输入大段文字时，需要用到文本输入域
语法：<textarea row="行数" cols="列数">请输入内容</textarea>
单选框&复选框： 让用户选择

<input type="radio/checkbox" value ="值" checked="checked"/>
1.type:
当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
2.value：提交数据到服务器的值(后台程序PHP使用)
3.name： 为控件命名，以备后台程序ASP、PHP使用
4.checked 当设置checked="checked"是，该选项被默认选中

下拉列表：

<form >
      <label>爱好:</label>
        <select   multiple="multiple"(当 设置multiple="multiple"时，可多选)>
            <option value="读书">读书</option>
            <option value="运动">运动</option>
            <option value="音乐">音乐</option>
            <option value="旅游"  selected="selected">旅游</option>
        </select>
</form>

讲解:1.value:向服务器提交的值
2.selected=“selected”:设置selected="selected"属性，则该选项就被默认选中
提交按钮： <input type="submit" value="提交"
重置按钮：<input type="reset" value="重置"
form表单中的label标签： label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本，就会触发控件。就是说，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上label for="控件id名称">

biu_bin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html最常用的标签

对于HTML初学者来说，掌握并且灵活运用标签是很难的一门功课，今天我们来盘点盘点html标签的那些事。勤加练习是掌握好标签的捷径。***head标签：***文档的头部描述了文档的各种属性和信息，包括文档的标题等。***title标签：***：只能放在head标签中，如下：<head> <title>...</title></head>...
复制链接

扫一扫

专栏目录