码迷,mamicode.com
首页 > Web开发 > 详细

html的标签介绍

时间:2020-04-26 11:14:24      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:alt   div   换行   点击   手动   服务   mit   标记   strong   

一,HTML网页的基本结构

<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置,可在head中设置网页标题,引入外部的资源文件 -->
   <head>
       <!-- 设置网页标题,显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分,显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

二,元素,元素也称为标记或标签,用于在网页中标记内容。

标签的介绍:

1,语法:标签使用< >为标志,标签名不区分大小写,推荐小写表示

2,单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。

<br>
<br/>

3,双标签:成对出现,包含开始标签和结束标签。

<html></html>

4,标签属性:

  • 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。
  • 同一个标签中可以添加若干组标签属性,使用空格间隔。

5,注释语法:

<!-- 此处为注释内容 -->

三,body中常用标签:

1,文本标签:

标题标签:自带加粗效果,从h1到h6字体大小逐级递减

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

2,段落标签: 

<p>段落文1</p>
<p>段落文2</p>
<p>段落文3</p>

3,常用普通文本标签:

 <b>加粗标签</b>
 <strong>强调标签,效果同b标签</strong>
 <i>斜体标签</i>
 <u>删除线标签</u>
 <span>行分区标签,用于对特殊文本特殊处理</span>
 <label>普通文本标签,常与表单控件结合实现文本与控件的绑定</label>

4,换行标签: 浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。

<br>

5,水平线标签:在页面中插入一条水平分割线

<hr>

6,容器标签:常用于页面结构划分,结合CSS实现 div+css 网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

7,图片与超链接标签(内联 / 块 标签)

7.1图片标签:用于在网页中插入一张图片。

<img src="url地址">

属性 src 用于给出图片的URL,必填。

属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。

属性 title 用于设置图片标题,鼠标悬停在图片上时显示

属性 alt 用于设置图片加载失败后的提示文本

语法:

<img src="" width="" height="" title="" >

7.2超链接标签:用户可以点击超链接实现跳转至其他页面。

属性 href 用于设置目标文件的URL,必填。

属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")

属性href也可以指向某个id号属性的标签

语法:

<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

8,列表标签:有序列表,无序列表

无序列表:默认用实心圆点标识列表项

<ul>
	<li>list item 列表项</li> 
	<li>list item 列表项</li>
	<li>list item 列表项</li>
</ul>

有序列表:默认使使用阿拉伯数字标识每条数据,可以使用start属性设置起始的值,默认为1  

<ul>
	<li>list item 列表项</li> 
	<li>list item 列表项</li>
	<li>list item 列表项</li>
</ul>

列表嵌套:在已有列表中嵌套添加另一个列表,常见于下拉菜单

<ol>
	<li>
		编程语言
		<ul>
			<li>Python</li>
			<li>java</li>
			<li>c++</li>
		</ul>
	</li>
</ol>

9,表格标签:表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下:

<!-- 创建表格标签 -->
<table>
	 <!-- 创建行标签 -->
	<tr>
		<!-- 行中创建单元格以显示数据 -->
		<td>姓名</td>
		<td>年龄</td>
		<td>班级</td>
	</tr>
	<tr>
		<td>YJ</td>
		<td>18</td>
		<td>l六(1)班</td>
	</tr>
</table>

单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后需要删除被合并的单元格,保证表格结构完整。

技术图片

 合+并示例代码:

<table border="1">
    <tr>
        <th>姓名</th>
        <td>李小明</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>010-1234567</td>
    </tr>
    <tr>
        <td>13912321213</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>李小明</td>
        <td>010-1234567</td>
        <td>13912321213</td>
    </tr>
</table>

10,表单标签<form></form>表单用于采集用户的信息并提交给服务器,由表单标签和表单控件组成。表单标签form负责提交数据给服务器,表单控件负责收集数据。

技术图片

 语法:

<form action="" method="" onsubmit="">
	<!--此处为表单控件-->
</form>

表单控件使用(重点) :表单控件用于采集用户信息,可设置以下标签属性

 技术图片

四,标签比较:

1,行内标签的特征

 

技术图片

 

 

2, 块标签特征:

技术图片

五,标签之间的转换:

1,内联标签如何转成块元素

技术图片

 2,块标签如何转成内联元素

技术图片

 六,标签嵌套

  1. 块标签中可以嵌套任意类型的标签 p 标签除外,段落标签只能嵌套行内标签,不能嵌套块标签
  2. 行内标签中最好只嵌套行内或行内块标签
  3. 标签嵌套 在双标签中书写其他标签,称为标签嵌套
  • 嵌套结构中,外层标签称为父标签,内层标签称为子标签。
  • 多层嵌套结构中,所有外层标签统称为祖先标签,内层标签统称为后代标签。
  • 平级结构互为兄弟标签。

七,字符实体:

某些情况下,浏览器会将一些特殊字符按照 HTML 的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写。

  • 使用 &lt; 在页面中呈现 "<"
  • 使用 &gt; 在页面中呈现 ">"
  • 使用 &nbsp; 在页面中呈现一个空格
  • 使用 &copy; 在页面中呈现版权符号"©"
  • 使用 &yen; 在页面中呈现人民币符号"¥"

html的标签介绍

标签:alt   div   换行   点击   手动   服务   mit   标记   strong   

原文地址:https://www.cnblogs.com/yjtxin/p/12776493.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!