1-Html基础

介绍

        复习时复习标红的内容

  • 简介:

        网页,是网站中的一个页面,通常是网页是构成网站的基本元素,是承载各种网站应用的平台。通俗的说,网站就是由网页组成的。通常我们看到的网页都是以 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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值