1-Html基础

最新推荐文章于 2023-05-09 20:19:15 发布

头秃人菜

最新推荐文章于 2023-05-09 20:19:15 发布

阅读量270

点赞数

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

本文链接：https://blog.csdn.net/qq_37834488/article/details/88246077

版权

JavaEE 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

介绍

复习时复习标红的内容

简介：

网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件

HTML：(HyperText Markup Language)超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，即告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）

HTML：超文本标记语言的简写，通过标签来定义的语言，代码都是由标签所组成

超文本：超出文本的范畴，使用 html 可以轻松实现此类操作

标记：html 所有的操作都是通过标记来实现的，标记就是标签<标签名称>

网页语言：通过浏览器展现效果的语言

特点：

1、简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便

2、可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证

3、平台无关性：超文本标记语言可用在广泛的平台，这也是万维网(www)盛行的另一个原因

4、通用性：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-->(XML) 死路
        WHATWG:HTML 5
HTML 5——2014年10月29日，W3C推荐标准

html基本结构：

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

1.HTML页面包含头部head和主体body

2.HTML标签通常是成对出现的，有开始就有结束，称为成对标签；没有结束标签称为空标签

3.HTML通常都有属性，格式：属性名＝“属性值”(多个属性之间空格隔开)

4.HTML标签不区分大小写，建议小写

5.文件名后缀为.html或.htm

html语言：

<!-- html5 的写法，向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english
    可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话） 
-->
<html lang="en"><!-- “en”表示英文 -->
<html lang="zh"><!-- “zh”表示中文 -->

html的操作思想：

网页中有很多数据，不同的数据需要不同的显示效果，这个时候需要使用标签把要操做的数据包起来，通过修改标签的属性值实现标签内数据样式的变化

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化

基本标签

结构标签：

<html><html>:根标签		 
<head></head>：头标签		 	
<title></title>:页面的标题		 
<body></body>：主体标签：网页内容

属性：		
    color:文本的颜色   <font color="red">内容</font>
    size: 文本的大小   <font size="30">内容</font>
    bgcolor:背景色		<body bgcolor="bisque"> </body>
    background:背景图片	<body background="图片的地址"> </body>     
颜色的表示方式：                        
    第一种方式：使用颜色名称: red green blue	             
    第二种方式：RGB模式 #000000  #ffffff  #325687   #377405

排版标签：

1.注释标签：<!--注释-->      (源文件会显示注释)          
2.换行标签：<br/>           
3.段落标签：<p>文本文字</p>
        特点：段与段之间有行高  (比br标签多一行)
        属性：align对齐方式	(left：左对齐   center：居中  right：右对齐)          
4.水平线标签:<hr/>
        属性:   
              width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)           
              size: 水平线的粗细 (像素表示，例如：10px)    取值范围（1~7）                              
              color:水平线的颜色                                  
              align:水平线的对齐方式(left：左对齐   center：居中  right：右对齐)

标题标签：

<h1></h1>  <h2></h2>  <h3></h3>……<h6></h6> (自动换行)
从h1到h6，大小是依次变小，同时会自动换行

容器标签：

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

列表标签：

无序列表标签： <ul></ul>
        属性：type :三个值，分别为circle(空心圆)，disc(默认,实心圆)，square(黑色方块)
        列表项：<li></li>
有序列表标签：<ol></ol>
        属性：type：1(默认/缺省)、A、a、I、i（数字、字母、罗马数字）
        列表项：<li></li>

定义列表：
dl (defination list)  定义列表
dt (defination title)  定义标题
dd (defination description)  定义描述
        <dl>
 		<dt>苹果</dt>
 			<dd>苹果是一种水果</dd>
 			<dd>富含维生素C</dd>
 		<dt>香蕉</dt>
 			<dd>香蕉是一种水果</dd>
 			<dd>吃了长寿...</dd>
        </dl>

<ul type="square">无序列表
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>
<ol type="I">有序列表
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ol>
<dl>
    <dt>苹果</dt>
    <dd>苹果是一种水果</dd>
    <dd>富含维生素C</dd>
    <dt>香蕉</dt>
    <dd>香蕉是一种水果</dd>
    <dd>吃了长寿...</dd>
</dl>

<!--列表嵌套-->
<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>绿茶
                <ul>
                    <li>中国茶</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>

图片标签：

<img/> 独立标签
    属性: 
      src：图片地址： 相对路径 （同一个网站）  绝对路径 （不同网站）
      width:宽度
      height:高度
      border:边框
      align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
      alt:图片的文字说明        有些浏览器不显示（没有效果）
      title:图片的悬停显示
      hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

链接标签：

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

<a>文本或图片</a>
    属性： 
 	href:跳转页面的地址(跳转到外网需要添加协议)     #(当超链接不需要到任何地址)
        target:_self(当前页面，默认)  _blank(新页面，之前页面存在)  _parent  _top
 	    _search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
 	name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值  
    
    <base target="_blank">  base标签：设置超链接的基本设置

表格标签：

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
<!--table的 align属性控制表格的对齐方式  left  center right-->
<!--td 的align属性控制内容对齐方式 left  center right -->
<!--td 的valign属性控制内容对齐方式 top  middle bottom -->
<table border="1" bordercolor="red" cellspacing="0" align="center">
	<caption>学生表</caption> <!-- 表格的表名-->
	<tr>
		<th>学号</th>         <!-- 表格的表头，使用th也可以表示单元格-->
		<th>姓名</th>
	</tr>
	<tr>
		<td>1</td>
		<td>aa</td>
	</tr>
</table>

<!--合并单元格：rowspan：跨行    colspan：跨列-->
<table border="1" bordercolor="red" cellspacing="0" align="center">
			<tr>
			<td colspan="4" align="center">学生表</td>
			</tr>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>语文成绩</td>
				<td>数学成绩</td>
			</tr>
			<tr>
				<td rowspan="2">1</td>
				<td rowspan="2">aa</td>
				<td>80</td>
				<td>90</td>
			</tr>
			<tr>
				<td>80</td>
				<td>90</td>
			</tr>
</table>

<table border="1" bordercolor="red" cellspacing="0" align="center">
			<tr>
				<td colspan="4" align="center">学生表</td>
			</tr>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td colspan="2">各科成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>aa</td>
				<td>80</td>
				<td>90</td>
			</tr>
</table>

文本格式化标签：

    <b> 	定义粗体文本。
    <big> 	定义大号字。
    <em> 	定义着重文字。
    <i> 	定义斜体字。
    <small> 	定义小号字。
    <strong> 	定义加重语气。
    <sub> 	定义下标字。
    <sup> 	定义上标字。
    <ins> 	定义插入字。    同<u>         定义插入字。下划线
    <del> 	定义删除字。    同<s>         定义删除字。
    <pre>       原样输出。

头标签：

    <!--该网页的关键字-->
	<meta name="keywords" content="keyword1,keyword2,keyword3">
	<!--该网页的描述-->
	<meta name="description" content="this is my page">
	<!--该网页的编码-->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">  html4.01
	<!--页面自动跳转,2秒后跳转到百度-->
	<meta http-equiv="refresh"content="2;URL=https://www.baidu.com">
	<!--该网页的编码-->
    <meta charset="UTF-8">  html5

    <!-- href：引入css文件的地址-->
	<link rel="stylesheet" type="text/css" href="./styles.css">
	<!--src：js的文件地址-->
	<script type="text/javascript" src=""></script>

特殊字符：

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

表单标签

可以提交数据到网站的服务器，这个过程可以使用表单标签实现

form标签：

常用属性：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请求大小理论上无限
         使用情况：一般用于插入修改等操作

get和post区别：

1、get请求地址栏会携带提交的数据，post不会携带

2、get请求安全级别较低，post较高

3、get请求有数据量大小限制，post没有限制

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 普通按钮  (与js一起使用)
      1.11 hidden  表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
      1.12 email  表示邮箱格式的数据
     
name属性：表单元素名字，只有name属性才能提交给服务器  
value属性：提交给服务器的数据
placeholder：提示信息

select元素（下拉列表）：

<select name="city">   <!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数-->  
    <!--option表示下拉列表项-->
	<option value="北京">北京</option> 
    <!--selected="selected"表示选中该项-->
	<option value="上海" selected="selected">上海</option>
	<option value="广州">广州</option>
	<option value="杭州">杭州</option>
</select>

textarea元素（文本域）：

 <textarea cols="100" rows="5">  表示5行100列的区域可以输入内容，该元素没有value属性

框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架

使用框架的缺点：开发人员必须同时跟踪更多的HTML文档；很难打印整张页面

frameset：

框架结构标签

使用方式：把 body 删掉，使用 framset 代替body

特点：框架结构标签（<frameset>）定义如何将窗口分割为框架；每个 frameset 定义了一系列行或列；rows/columns 的值规定了每行或每列占据屏幕的面积

frame：

框架标签，定义了放置在每个框架中的 HTML 文档

案例：

<!--rows：按照行进行划分  cols：按照列进行划分--> 

    <!--上下分割  上面20%,下面剩余部分-->
	<frameset rows="20%,*">
		<frame name="frame1" src="top.html">
		<frame name="frame2" src="bottom.html" />
		
	</frameset>   

   
    <!--左右分割  左边20%,右边剩余部分-->     
    <frameset cols="20%,*"> 
		<frame name="frame1" src="left.html" />
		<frame name="frame2" src="right.html" />
	</frameset>

注意：

1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用

2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"

3. frameset 的属性 frameborder="1|0|yes|no" 表示是否有边框 border="1" 表示边框的粗细 bordercolor 表示边框颜色

综合案例

表单标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="get">
    <table align="center">
        <caption>
            <h1>注册</h1></caption>
        <tr>
            <td align="right">用户名：</td>
            <td><input type="text" name="username" value="bluesky" /></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td><input type="password" name="confirmpwd" /></td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="男" />男
                <input type="radio" name="sex" value="女" checked="checked" />女
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
                <input type="checkbox" name="hobby" value="足球 " />足球
                <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
                <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td>
                <input type="file" name="upload" />
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">居住地：</td>
            <td>
                <select name="city">
                    <option value="北京">北京</option>
                    <option value="上海" selected="selected">上海</option>
                    <option value="广州">广州</option>
                    <option value="杭州">杭州</option>
                </select>
            </td>
        </tr>
        </tr>
        <tr>
            <td align="right">个人介绍：</td>
            <td>
						<textarea cols="100" rows="5">
			     </textarea>
            </td>
        </tr>
        </tr>
        <tr>
            <td></td>
            <td align="center">
                <input type="submit" value="注册" />
                <input type="reset" value="重置" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>

运行结果：

框架标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--1.框架标签不能和body同时出现
	2.frameset: border去除框架标签的框 ，示例：border="0"
	3.frame框大小不变：两种情况:
		   第一种：border ="0"
		   第二种： noresize="noresize"  不改变大小
	 备注:scrolling是否显示滚动条
			    yes 显示  no 不显示  auto 如果内容高度超过屏幕高度直接显示滚动
	4. frame 是框，内容使用src来填充，
			 定位显示到指定位置：  使用name属性
		例如：点击left.html的标签跳转内容显示在right.html
			 1.给right.html的frame添加name属性，方便定位
			 2.在left.html中使用target目标定位，根据name名查找
		-->
<frameset rows="200,*" border="10px" bordercolor="yellow">
    <frame src="top.html" scrolling="yes" noresize="noresize" />
    <frameset cols="200,*">
        <frame src="left.html" scrolling="yes" noresize="noresize" />
        <frame src="right.html" name="content" scrolling="yes" />
    </frameset>
</frameset>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="red">
<h1>HTML的框架标签</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body bgcolor="#FFA600">
<a href="http://www.edu.com">aa官网</a><br/>
<a href="http://www.edu.com">bb官网</a><br/>
<a href="http://www.edu.com">cc在线</a><br/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#00FFFF">
<h1>正文内容</h1>
</body>
</html>

运行结果：

头秃人菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-Html基础

Html：复习时复习标红的内容简介：HTML：(HyperText Markup Language)超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式，即告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）。HTML：超文本标记语言的简写，通过标签来定义的语言，代码都是由标签所组成超文...
复制链接

扫一扫

专栏目录