HTML相关知识

最新推荐文章于 2024-07-18 18:43:34 发布

zhenghuoyan

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量151

点赞数 2

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/zhenghuoyan/article/details/113782687

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端：在传统B/S架构中，前端和后台是区分，前端：用户眼睛中看到所有的内容，后端泛指提供数据的
用户体验在软件生命周期占据越来越重要的地位，决定用户体验感的就是前端
网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。
通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

1. HTML简介

1.1 HTML概述

 HTML全称：Hyper Text Markup Language(超文本标记语言)
 	超文本：超出文本范围内的内容，声音，图片，视频，falsh动画。。。。
 	标记：标签，如果你想告诉浏览器对于某些特殊的字段显示出特定的效果，那么你就需要使用预先定义好效果的标签来标记你所需要显示特殊效果的文本
 	<name><big>张三</big></name><age>18</age>1801801810
 	语言：脚本语言，他的作用对象不是操作系统，而是浏览器，如果你想让浏览器显示一些内容，那么你就需要用html语言来告诉浏览器
 
 	xml:可扩展标记语言
 	
 	我们学习html就是学习预先定义好效果的那些的标签
 
	超文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
	HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在文本文件中添加标记符。
	HTML可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）。
	简单一句话：HTML是一门用来创建网页的标记语言。

1.2 HTML特点

其主要特点如下：
1 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2 可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。
3 平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
4 通用性：HTML是网络的通用语言,一种简单、通用的标记语言。

1.3 HTML的发展

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准  
		W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0
		WHATWG:HTML 5
HTML 5——2014年10月29日，W3C推荐标准

1.4 HTML基本结构

html文件就是一个普通文本，不过该文本是以.html或者.htm来结尾的

<!--文档声明：告诉浏览器使用HTML5版本 -->
<!DOCTYPE html>
<html>
  <!--网页的头部 -->
  <head>
   
    <!--设置页面的标题 -->
    <title>第一页面</title>
  </head>
   <!--网页的主体 -->
  <body>
    <!--需要展示的信息-->
    页面内容
  </body>
</html>

1.HTML页面包含头部head和主体body
2.HTML标签通常是成对出现的，有开始就有结束，这样的标签称为成对标签、没有结束标签称为空标签。
3.HTML通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
4.HTML标签不区分大小写,建议小写
5.文件名后缀为.html或.htm

2 列表标签

2.1.1 无序列表

ul （unorder list）

<!--
	ul:无序的列表根标签
		type:列表开始的标记
			disc：默认值，实心圆
			circle：空心圆
			square：黑色方块
			none:没有
	li:一个列表
-->
	<ul type="square">
		<li>裤子</li>
		
		<li>上衣</li>
		<li>裙子</li>
		<ul type="none">
			<li>七分裙</li>
			<li>超短裙</li>
			<li>连衣裙</li>
		</ul>
	</ul>

2.1.2 有序列表

ol（order list）

   <!--ol:有序列表
			type:列表开始的标记
				1:阿拉伯数字来表示顺序，默认值
				a.小写的abcd来表示顺序
				A:大写的ABCD来表示顺序
				I:罗马数字
				i:小罗马数字

	-->
	<ol type="none">
		<li>裤子</li>
		
		<li>上衣</li>
		<li>袜子</li>
		<li>裙子</li>
		<ul type="none">
			<li>七分裙</li>
			<li>超短裙</li>
			<li>连衣裙</li>
		</ul>
	</ol>

2.1.3 定义列表

dl (defination list) 定义列表

dt (defination title) 定义标题

dd (defination description) 定义描述

 定义列表   <dl>
 				<dt>苹果</dt>
 				<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
           </dl>

2.1.4 列表嵌套

<ul>
			<li>咖啡</li>
			<li>茶
				<ul>
					<li>红茶</li>
					<li>绿茶
						<ul>
							<li>中国茶</li>
							<li>非洲茶</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>牛奶</li>
</ul>

3 图片标签

<!--
		img:图片标签的根标签
		src:该图片的地址
			网络路径:
			本地路径：
				绝对路径:从盘符开始写
				相对路径：以本文件为参照物
						如果是兄弟路径，可以直接写文件名
						如果是父级目录以上,../向上翻一层为参照物
		alt:文字说明，百度搜索时搜索的关键字
		title:悬停时文字提示
		width:宽度
      	height:高度
      	宽高度一般不要去设，可能造成图片失真


	-->
	<p>下面将会有一张美女图片</p>
	<img src="../img/girl.jpg" alt="古典美女" title="你想放大吗？" align="top">
	<p>上面的美女图片好看吗</p>

4. 链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a>文本或图片</a>

a:超链接标签，可以跳转到其他的位置
	href:锚，超链接的位置
		网络资源：记得加上http://
		本地资源：
			绝对路径
			相对路径
		本页资源：
			最顶部的标签需要加id属性
			href取值可以用#+id值
	target:跳转资源的方式
		_blank：新窗口打开	
		_self:本窗口打开，默认取值性：

5. 容器标签

   <span></span>:行级标签，所有内容都在同一行
         作用：   <div></div>:主要是结合css页面分块布局
                  <span></span>:进行友好提示信息

6.基本标签

p:段落标签
align:对齐方式
left:默认取值，左对齐
right:右对齐
center:居中
hr:水平线标签
width:水平线的长度
a.像素为单位,300px
b.屏幕的百分比
size:水平线的粗细，以像素为单位
color:水平线的颜色
a.颜色的单词
b.rgb:red,green,blue:#00ff00
align:对其方式
left:左对齐
right:右对齐
center:默认取值，居中
h1~h6：表示的是标题标签
标题标签的默认效果是加粗加黑加大
从1~6的程度不同

7. 表格标签

表格：根标签是 table
表格是由多个行组成: tr
行是由单元格组成：td

table:
		border:边框的宽度
		bordercolor:边框的颜色
		cellspacing:单元格的边距
		cellpadding:单元格的内容和边框之间的距离
		align:表格在页面中的对其方式
		width:表格的宽度
		height:表格的高度
	tr：表示的是页面中的行元素
	td:表示的是表格页面中的单元格元素
	th:表示的是表头中的单元格元素，默认效果是加粗加黑
	caption:表格的标题，默认效果是居中的
	colspan:是td的属性，表示的是一个单元格占据几列
	rowspan:是td的属性，表示一个单元格占据几行

8. 表单标签

8.1from标签
常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
      method:请求方式：get 和post
      enctype:表示是表单提交的类型
 		    默认值：application/x-www-form-urlencoded  普通表单
 		           multipart/form-data  多媒体表单(一般用于文件上传)
 		           text/plain 普通文本
 		           
  get:
    1.数据存在地址栏中,请求参数都在地址后拼接 path?name="张三"&password="123456"
    2.不安全
    3.效率高
    4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
> post：
    1.地址栏没有数据：请求参数单独处理。
    2.安全可靠
    3.效率低
    4.post请求大小理论上无限。
使用情况：一般用于插入修改等操作

8.1 input标签

type: 以下为type可能要取的值：
1.1 text 文本框输入内容
1.2 password 密码框密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
表示同一组中只能选中一个( checked =“checked” 表示选中)
1.4 checkbox 表示多选，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)

 以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
  1.6 submit   提交
  1.7 reset   重置
  1.9 image   图片提交按钮
  1.10 button 普通按钮
  1.11 hidden  表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
  1.12 email  表示邮箱格式的数据
  name属性：表单元素名字，只有name属性才能提交给服务器。   
  value属性：提交给服务器的数据
  placeholder：提示信息
  select 元素：下拉列表
  textarea元素：(文本域)

9. 文本格式化标签

    <b> 	定义粗体文本。
    <big> 	定义大号字。
    <em> 	定义着重文字。
    <i> 	定义斜体字。
    <small> 	定义小号字。
    <strong> 	定义加重语气。
    <sub> 	定义下标字。
    <sup> 	定义上标字。
    <ins> 	定义下划线。
    <del> 	定义删除字。

10. HTML的特殊字符

10.1 特殊字符

        &lt; 小于号  
        &gt; 大于号
        &amp; 与字符
        &quot; 引号 
        &reg; 己注册
        &copy; 版权
        &trade; 商标
        &nbsp; 空格

zhenghuoyan

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML相关知识

文章目录1. HTML简介1.1 HTML概述1.2 HTML特点1.3 HTML的发展1.4 HTML基本结构2 列表标签2.1.1 无序列表2.1.2 有序列表2.1.3 定义列表2.1.4 列表嵌套3 图片标签4. 链接标签5. 容器标签6.基本标签7. 表格标签8. 表单标签8.1 input标签9. 文本格式化标签10. HTML的特殊字符10.1 特殊字符前端：在传统B/S架构中，前端和后台是区分，前端：用户眼睛中看到所有的内容，后端泛指提供数据的用户体验在软件生命周期占据越来越重要的
复制链接

扫一扫