HTML(标签)

简介: HTML标签分类1.块级标签 :每个块级标签独自占一行 h1--h6 标题 p  段落 hr : 水平线 ol li  有序列表 ul li : 无序列表 div : 2.
HTML标签分类
1.块级标签 :每个块级标签独自占一行

h1--h6 标题
p  段落
hr : 水平线
ol li  有序列表
ul li : 无序列表
div : 
2.行级标签  : 按行逐一显示,不会自动换行
img ,a,b,i,em,strong,small,br,span
img 图片
src:图片地址
alt:提示文字
a:超链接  属性 href : 要连接到的地址
target : '_blank','_self'
b:给文字加粗
i:斜体
em:强调字体,效果跟斜体一样
strong : 强调字体,效果和粗体一样
small : 小号字体
br : 换行
span : 普通的行级标签,没有任何效果

特殊符号 :需要进行转义
< :  &lt;  (less than)
> : &gt;  (great than)
"" : &quot;
空格:&nbsp;
版权号:&copy;
<img src="img/goodsDetails11.jpg"  alt="图片"/>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<b>加粗文字</b>
		<i>斜体文字</i>
		<b><i>加粗斜体文字</i></b> <br />
		<strong>强调文字</strong><br />
		<small>2小号文字</small>外部文字<br />
		H<small>2</small>O<br />
		<em>强调效果和斜体一样</em><br />
		<span>
			这是一个
			     
			     
			span标签,没有任何样式
			小于号是:< <br />
			大于号是: >
			双引号是:"
			版权号是:&copy;
		</span>

表格
table : 表格
tr : 行
th : 定义表格的页眉单元格
td :定义普通单元格
colspan:夸列
rowspan : 跨行
thead:表格头部信息
tbody:表格主体部分
tfoot:表格脚

caption: 表格标题

rowspan:合并行  colspan:行并列

<h4>表头:</h4>
    <table border="1">
    <thead>
  <th>姓名</th>   
  <th>电话</th>
  <th>电话</th>
    </thead>
    <tr>
  <td rowspan="2">Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 854</td>
  </tr>
  <tr>
   <td>Bill Gates</td>
   <td colspan="2">555 77 854</td>
  </tr>
   <tfoot>
   	<td rowspan="3">Bill Gates</td>
   <td colspan="2">555 77 854</td>
  </tfoot>
</table>

  <h4>垂直的表头:</h4>
  <table border="1">
  <thead>
  <th>姓名</th>
  <td>Bill Gates</td>
  </thead>
  <tr>
  <th>电话</th>
  <td>555 77 854</td>
 </tr>
 <tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

表单
form 
属性
action : 要处理该表单的url地址(提交到的服务端地址)
method : 请求的方式 
1:post,在地址栏不显示表单数据;

2:get:表单数据在地址栏显示

                         name:标识     autocomplete:浏览器是否可以自动填充

                         enctype:指定表单内容编码 (默认 utf-8)

input
属性:
type:
text : 文本输入框
password : 密码输入框
radio : 单选框
checkbox : 复选框
button :按钮
name : 表单元素的名字   
value : 表单的值     
checked : 是否选中,只能用于 radio 和checkbox

disabled : 设置表单元素不可用

                       【在form表单中如果属性的值和属性名相同,可以省略属性值如checked和disabled】

maxlength : 最大字符数

<form action="http://www.baidu.com" method="get">
	用户名:<input type="text" name="username" value="123456" /><br />
	密码:<input type="password" name="password" value="123456"/><br />
	确认密码:<input type="password" name="repassword" value="123456" /><br />
	性别:男 <input type="radio" name="sex" value="nan" />
	女 <input type="radio" name="sex" value="nv" /><br />
	爱好:<input type="checkbox" name="love" value="1" />吃
	<input type="checkbox" name="love" value="2" />喝
	<input type="checkbox" name="love" value="3" />玩
	<input type="checkbox" name="love" value="4" />乐 <br />
	
	<hr />
<textarea rows="10" cols="30">
这是一个文本域
</textarea>
<hr />
下拉菜单
<select name="爱好">
<option value="chi" value="1">吃</option>
<option value="he" value="2">喝</option>
<option value="wan" value="3" selected="selected">玩</option>
<option value="le" value="4">乐</option>
</select>
<hr />
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
  </fieldset>
  <button>button提交</button>
  <input type="button" value="input_button 提交"/>
  <input type="submit" value="input_submit 提交" />
</form>

点击input_button不会提交,点击button 提交 和 input_submit 提交 可以提交,地址栏结果如下:


(www.baidu.com 只是示例,没有实际用途)

目录
相关文章
|
3月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
78 5
|
2月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
97 49
|
5月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
71 0
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
50 5
|
2月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
存储 移动开发 前端开发
|
3月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
60 2
|
3月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
46 1
|
4月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
233 1
|
4月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
402 1