html

最新推荐文章于 2022-07-24 12:17:28 发布

语言表达一切

最新推荐文章于 2022-07-24 12:17:28 发布

阅读量417

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/wanghuitao666/article/details/42528797

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTML的概述（了解）

a.html是什么： hypertext markup language 超文本标记语言
超文本：音频，视频，图片称为超文本。.
标记：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。

html中的数据都会封装在标签中；因为可以通过标签中的属性值的改变对封装内数据进行操作；
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
HTML页面直接由浏览器解析执行。

二、HTML的历史（了解）

三、HTML的网络术语（明白）

    * 网页：由各种标记组成的一个页面就叫网页 .
    * 主页(首页) : 一个网站的起始页面或者导航页面 .
    * 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
    * 元素：<p>内容</p> 称为元素.
    * 属性：给每一个标签所做的辅助信息。
    * xhtml：符合XML语法标准的HTML。
    * dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
    * http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

四、HTML的编辑工具（了解）
*.notepad 记事本
*.editplus : 语法高亮显示
技巧：根据颜色判断单词是否出错。（不是100%）
*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
*.dw(dreamweaver,专业工具) 代码提示.

五、HTML的规范(知道)
    *.HTML是一个弱势语言
*.html 不区分大小写
*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
*.html 的结构
  1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
  2)head部分：不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
  3)body部分：我们缩写的代码必须放在此标签內。

六、HTML的各种标签(掌握)
标签特点：对数据进行封装，那么就有开始标签和结束标签
但是也有一些标签纸体现单一功能，所以不需要结束标签，规范中要求标签必须结束，所以这样的标签在内部结束；
如：<br/><input/> <img/><hr/>
明确：每个标签都有私有属性。也都有公有属性。
         html中表示长度的单位都是像素。HTML只有一种单位就是像素。
   body:
  bgcolor: 背景颜色
  background:背景图片
  text: 文本颜色

1.排版标签
        所有的浏览器默认情况下都会忽略空格和空行
  P：p代表一个段落
   属性： align:对齐方式. 取值：left,right,center
  <br>代表是换行。
  hr:
   color: 线的颜色
   size : 线的粗细
   width: 线的长短
        两种写法：

1) 绝对值 eg: 500
2) 相对值： 50%
noshade: 不要阴影
align: 对齐方式取值： left,right,center

  center: 内容居中
  pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行
  div: 块级标签必须单独占据一行
      属性： align :
  span: 块级标签不换行字体标记
2 字体标签
  h1...h6:定义字体大小
   属性： align :居中
  font:
   color:字体颜色
    颜色的写法有3种： 1)英文单词: red
             2)十六进制：#00ffcc
          3)RGB(三原色) : new RGB(124,156,23)
   size:字体大小
   face：字体类型
  特殊字符： <小于 >大于 & &符号 " 双引号'单引号
        © 版权 ™商标  空格
        扩展：绐
  b: 加粗
  strong: 加粗
  i:斜体
  em: 斜体
  u: 下划线
  s: 中划线(删除线)
  sup: 上标
  sub: 下标.
3.图像标记
  img: 代表是一副图片
     属性： src : 图片的路径
                  两种写法：a) : 相对路径路径是相对页面所在的路径两个标记.和.. ,分表代表当前目录和父路径
                b) ：绝对路径
                 1) : 以盘符开始的路径
               eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
           2) : 网络路径
            eg: http://www.baidu.com/images
     width: 宽度
     height：高度
     Alt：当图片显示不出来的时候代替图片显示的内容
     title：提示性文本
     border: 边框
  热点：就是特定的位置添加超链。
     <img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
     <map name="Map" id="Map">
      <area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
     </map>
4.清单标记
  列表标签：3种
   a.无序列表ul
    属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
   b.有序列表(OL)
    属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
       start: 从几开始
   c.定义列表(dl)
     dt: 列表项的标题
     dd: 列表项
5.超链接
  3种超链接:
   1. 连接到其他页面
   2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
   3. 连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
    属性：target: 告诉浏览器怎么显示目标页面
      HTML中已定义4个值： _self :在同一个浏览器中显示
                 _blank: 打开新的浏览器显示
                 _parent: 在父窗口中显示
                 _top: 在顶级窗口中显示

<a href ="http://www.sina.com.cn" target="_blank">新浪网站</a>
当被点击后，会启动引擎所对应的解析程序；
去查找指定主机；
1.先去本机主机的hosts文件，如果没有找到该主机对应的IP地址
2.去公网dns服务器上找对应的ip地址；

<a href ="mailto:abc@sohu.com?subject=sss&cc=dd@163.com" >联系我们</a>
当点击超链接时，就会出现邮件相关联的解析程序；本机默认的是outlook

超链接的另一个作用：
定位标记：
<a name="top">一个位置</a>
<a href = "#top">获取那个位置</a>

6.表格标记
    table: 表格
    属性：border:边框
    width:宽度
    height：高度
    align:表格的对齐方式
    cellpadding:单元格内容到边的距离
    cellspacing:单元格和单元格之间的距离
    bgcolor:背景颜色
    background:背景图片
    dir:单元格内容的排列方式取值：ltr 从左到右， rtl:从右到左
  tr: 行
    属性：dir:
    bgcolor:
  td: 单元格
    属性： align: 内容的横向对齐方式
     valign: 内容的纵向对齐方式 top,middle,bottom
     width: 绝对值或者相对值(%)
     height:单元格的高度

  单元格的合并：
        单元格的属性：
         colspan: 横向合并
      rowspan: 纵向合并
   th: 相当于<td> + <b>
      属性同<td>
  caption: 表格的标题
     属性：align: 取值：left,center,right,top,bottom
  thead
  tbody
  tfoot
     写与不写的区别：
             1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。     2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容

举例：

<span style="font-size:14px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
     <table cellpadding = "18" bgcolor = "#3366ff" align = "center">
		<tr>
			<td>
				<table border =  "1" bordercolor = "white">
					<tr>
						<td colspan = "4" ><input type = "text" value  = "0" dir = "rtl" size = "23" > </td>
					</tr>
					<tr>
						<td><input type = "button" value  = " 7 " ></td>
						<td><input type = "button" value  = " 8 " ></td>
						<td><input type = "button" value  = " 9 " ></td>
						<td><input type = "button" value  = " + " ></td>
					</tr>
					<tr>
						<td><input type = "button" value  = " 4 " ></td>
						<td><input type = "button" value  = " 5 " ></td>
						<td><input type = "button" value  = " 6 " ></td>
						<td><input type = "button" value  = " -  " ></td>
					</tr>
					<tr>
						<td><input type = "button" value  = " 1 " ></td>
						<td><input type = "button" value  = " 2 " ></td>
						<td><input type = "button" value  = " 3 " ></td>
						<td><input type = "button" value  = " *  " ></td>
					</tr>
					<tr>
						<td><input type = "button" value  = " 0 " ></td>
						<td><input type = "button" value  = " C " ></td>
						<td><input type = "button" value  = " / " ></td>
						<td><input type = "button" value  = " = " ></td>
					</tr>
				</table>
			</td>
		</tr>
	 </table>
 </body>
</html>
</span>

7.框架标记及<iframe>
        框架页面上不允许有body标签
  frameset: 框架的集合
   rows: 纵向分部框架.
   cols: 横向分部框架.
         写法有两种: 1) 绝对值 "200,*" ,*代表剩余的
         2) 相对值 "30%,*"
  frame: 框架. 一个框架显示一个页面
   scrolling: 是否需要滚动条。默认是true
   noresize : 固定框架大小
   bordercolor: 给框架边框起一个颜色
   name : 给框架起一个名字
    内嵌框架：嵌入在一个页面上的框架.(仅仅IE支持)
    iframe:
     属性： width: 宽度
         height：高度
          scrolling : 是否需要滚动条
8.表单标记及语义化

该标签是可以和服务器进行交互的
<form>
表单标签中的元素
<input>该标签因为type属性的值不同，所对应的组件也不一样
type属性：
1. text 文本框，输入的文本可见；
2.password：密码框，输入的文本不可见；
3.radio单选框，注意，要被选中，必须要给单选框定义一个属性name，
当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同；
4.chenckbox复选框，当对多个数据进行同时选中时；
5.file 可以进行文件选择的组件，通常用于附件，或者文件上传；
6.hidden：隐藏组件，该组件的不会页面上显示，但是其定义的name和value可以提交到服务器；
7.button 按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册事件并加入自定义效果。
8.reset：重置按钮：将组件中被操作的效果还原到初始状态；
9.submit：提交按钮。将组件中添加的数据提交到指定的目的地；
10image：图像组件，为了避免提交按钮的难看，可以通过image的src属性链接一个好看的按钮图片完成提交效果；

下拉菜单：<select>
每一个下拉菜单项都由option进行封装；
<select>
<option></option>
</select>

文本区域:<textarea>

表单组件通常都需要定义name和value属性，因为要将数据发送到服务端
服务端只有知道了该name的值才可以对提交的数据进行获取。

form标签的常见属性：
action：指定数据提交的目的地，mothod：提交方式：两种常见值get和post，get为默认

get和post的区别：
get：会将提交的数据显示在地址栏上
post：不会讲数据显示在地址栏

get:提交的数据的体积收地址栏的限制
post：可以提交大体积数据

get：对敏感信息不安全
post:对敏感信息安全

get：会将提交信息封装在请求行，也就是http信息头之前
post：会将提交信息封装在数据体中，也就是http信息头之后的空行后；

对于服务端而言：
表单提价尽量用post，因为涉及到编码问题：
对于post提交的中文，在服务吨可以直接使用setcharacterEncoding（“utf-8”）；就可以解决了
对于get提交的中文，在服务端只能通过iso8859-1将数据编码一次，再通过指定的码表惊醒解码；

使用表单的组件不一定要定义form标签;

for和id搭配形成标注(形象理解射箭的靶子，目标)；

练习1：

<span style="font-size:14px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
      <!--
		  表单： <form> : 收集数据，发送数据
	  -->

	  <form action = "demo01-排版标签.html" method = "post">
	        <fieldset>
			<legend>必填信息</legend>
			姓名：<input type = "text" value = "刘德华" name = "username"  size = "50" maxlength = "5" readonly disabled ><br>
			密码: <input type = "password" value = "刘德华"  name = "password" ><br>
			隐藏框： <input type = "hidden" value = "刘德华" name = "hidden" ><br>
			性别： <input type = "radio" value = "male" name = "gender" checked >男<input type = "radio" name = "gender" value = "female"  >女<br>
			国籍： <input type = "radio" value = "china" name = "country" >中国<input type = "radio" name = "country" value = "america" checked >美国<input type = "radio" name = "country" value = "japan"  >日本<br>
			</fieldset>
			<br>
			 <fieldset>
			<legend>选填信息</legend>
			爱好:<input type = "checkbox" value = "eat" name = "love" checked = "checked">吃饭<input type = "checkbox" value = "sleep" name = "love" >睡觉<input type = "checkbox" value = "study" name = "love" >学java<br>
			学历:<select multiple>
				  <option value = "daxue">大学</option>
				  <option value = "zhongxue">中学</option>
				  <option value = "xiaoxue" selected>小学</option>
			    </select><br>
			留言：<textarea cols = "20" rows = "5" name = "liuyan" id = "liuyan">大神留点足迹吧!!!
			</textarea>
			</fieldset>
		    <input type = "button" value  ="普通按钮" name = "abc" onclick = "alert(this.value)">
			 <input type = "submit" value  ="提交按钮" >
			 <input type = "reset" value  ="重置按钮" >
			 <input type = "image"  src = "images/1.jpg" width = "50" height = "25" >
			 <button>普通按钮</button>
			<label for = "liuyan">姓名:</label><input type = "text" value = "刘德华" name = "username"  size = "50" maxlength = "5" id = "name" >
			<label onclick = "alert(this.innerHTML)">林志玲</label><br/>
			选择文件:<input type="file" name="file" ></br>
			一个图片:<input type="image" src="images/1.jpg">
	  </form>
 </body>
</html>
</span>

练习2：

<span style="font-size:14px;"><!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">

  </style>
 </head>
 <body >
 <div  width="800" height="800">
<div id ="one">
  <P  width="54" height="54"><img src="images02/shop.gif" align="center"/>  购物简易计算器<P>
  </div>
  第一个数：<input type="text" /><br/>
  <pre></pre>
  第一个数：<input type="text" /></br>
  <p></p>
  <input type="button"/ value="   +  ">  ；
  <input type="button"/ value="   -  ">  ；
  <input type="button"/ value="   *  ">  ；
  <input type="button"/ value="   /  ">  ；
  <p></p>
  计算结果: <input type="text" value=""/>
  </div>
 </body>
</html>
</span>

9.多媒体标记
  bgsound: 背景音乐
  embed: 播放多媒体文件.
  marquee: 移动
   属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px
      behavior: 行为方式取值：slide,alternate,scroll
      scrollamount : 移动速度
      loop: 循环多少圈。负值表示无限循环
      scrolldelay: 移动一次休息多长时间。单位是毫秒
10.头标记