web 服务本质: 浏览器发出请求--HTTP协议--服务端接收信息----服务端返回响应---服务端把HTML文件发给浏览器--浏览器渲染页面.

HTML: 超文本标记语言是一种用于创建网页的标记语言.

超文本:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素

本质是浏览器可识别的规则,我们按照规则写网页,浏览器根据我们写的代码渲染网页,对于不同的浏览器对于同一个标签渲染不同(兼容性问题),网页文件的扩展名:  .HTML.

HTML是一种标记语言而不是编程语言.

标记语言是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编码

HTML使用标签来描述网页.

基本的HTML文档

<!DOCTYPE html>
<html lang="zh-CN">  #lang选择的语言
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

解释:

<!DOCTYPE html> :用来声明为HTML文档, 声明必须是 HTML 文档的第一行,位于 <html> 标签之前.
<html>,<\html>:是文档开始和结束的标志.在他们之间是文件的头部和身体
<head>,</head> 是文档头部开始和结束的标志,它们之间的内容不会在网页中显示,里边必须包含标题title
<meta>:提供了HTML的元数据,元数据不会显示在客户端,但是会被浏览器解析,
元数据META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
<title>  </title> 定义了网页的标题在浏览器标题栏中显示.
<body> </body> 之间的内容是网页可见的内容

HTML标签
HTML标签是有尖括号包括着的关键字
HTML标签的样式: 1.成对出现的 <html>,</html>
         2.单独出现的 <br/>
标签里面可以有若干的属性,也可以没有属性

标签的语法:

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性:

  • id:定义标签的唯一ID,HTML文档树中唯一
  • class:为html元素定义一个或多个类名(classname)(CSS样式类名)
  • style:规定元素的行内样式(CSS样式)

HTML 注释 <!--注释内容-->
head 常用的标签

meta的属性有两种:

  1.http-equiv属性: 正规名字叫网页重定向 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<meta http-equiv="refresh" content="5; https://www.baidu.com">        页面5秒后连接到百度网页

  2.name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    
非 meta标签
1.
<title>oldboy</title> 标题
  2.<link rel="icon" href="favicon.ico"> # link 连接到外部样式文件 icon 图标
  3.<link rel="stylesheet" href="mystyle.css"> #样式文件
  4.<script src="myscript.js"></script> js文件

body常用的标签

块级标签(独占一行)

块级元素特点:
  1. 独占一行,默认宽度占100%      
  2. 可以直接定义宽高。
  3. 块级元素可以设置margin和padding的四个方向
  4. 块级元素可以包含行内元素和块级元素
  5. 嵌套(包含下),子块标签宽度在没有定义的情况下和父块标签宽度相同。

常见的块级元素有:

1.h1~h6 是用来定义标题的重要程度   

<h1>标题1</h1> 页面中的大标题,只能出现一次在一个页面,  重要程度最高
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>重要程度最低

2.<hr> 在网页中加入一条横线

3.<p>段落标签</p>: 会上下生成空白行而 div标签就没有

4.<div></div>:div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

5.<ul></ul> 无序列表

6 <li></li>   无序列表中的内容

行内标签(长度根据内容确定)

  特点:

  1. 多个内联标签的内容在一行显示.
  2. 宽度根据内容确定。
  3. 不可以设置宽高。
  4. 行内元素只可以设置margin和padding的左右两个方向,上下不起作用。
  5. 行内元素display默认为inline
  6. 行内元素一般只包含行内元素和文本。可以嵌套。

常见的行内标签有:

  1. a :超链接标签所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址可以有几种类型:

  绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
  相对URL - 指当前站点中确切的路径(href="index.htm")
  锚URL - 指向页面中的锚(href="#top")href中可以跟name的值或id的值,但是top前边必须有#,因为这是锚点的标志

target:

  _blank表示在新标签页中打开目标网页
  _self表示在当前标签页中打开目标网页

2.<b>加粗</b>  和 <strong>加粗</strong> 效果一样但是strong更有语义,推荐strong

3.图片标签<img>

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="" height="高(宽高两个属性只用一个会自动等比缩放)">

4.<u>下划线</u>    和 .<ins>删除线</ins> 效果相同

5.<s>删除</s>  和 .<del>删除线</del> 效果相同

6.<i>斜体</i>  和 <em>斜体</em> 效果一样em更有语气强调,推荐用em

7.span标签用来定义内联行(行内元素),并无实际的意义。主要通过CSS样式为其赋予不同的表现。

标签嵌套:

关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。

p标签不能包含块级标签。

特殊字符

内容 对应代码
空格 &nbsp
> &gt;
< &lt
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

列表

1.无序列表

ul只能容有li,li里边可以有任意标签

<ul type="disc">
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ul>

 

结果:

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式) /*这个用css可以设置为: List-style-type:none*/

 2.有序列表

<ol type="1" start="2">   
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
    <li>第四章</li>
</ol>

结果:

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

结果:

表格(table)

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据

 

<body>
<table border="1" cellspacing="5" width="300px">
<caption> 表格题目 </caption> <thead> <tr>       <!--行--> <th>序号</th> <!--表格的表头使用th标签进行定义,大多数浏览器会把表头显示为粗体居中的文本--> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <!--数据单元格tabledata的内容--> <td>egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>元昊</td> <td>日天</td> </tr> </tbody>
  • <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容
  • <tr> 行标签   table row 的缩写
  • <th> 表格的表头的内容使用th标签进行定义,大多数浏览器会把表头显示为粗体居中的文本  table head的缩写
  • <td> 数据单元格(tabledata)的内容
  • <caption> 表格题目 </caption>

属性:

  • border: 表格边框的粗细.
  • bordercolor   表格边框颜色
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 宽度 :里边可以是(像素 百分比 等).(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan ="2": 单元格横跨多少列(即合并单元格),两个单元格合并
  • align="center| left|right"  文字居中 ,左对齐,右对其, 1这项写在table中就是表格居中,2这个写在tr中就是表格中的文字居中
  • bgcolor 给表格配背景色
  • valign = "center| top|rbottom"  垂直对齐

结果:

表单(form)

作用:收集信息

功能:

  • 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
  • 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
  • 表单还可以包含textarea、select、fieldset和 label标签。

表单的组成:

  1提示信息

  

 

  2表单控件

  

  3.表单域:表单输入的区域

 

form元素的属性:

  • action: url    用于指定表单的发送地址(服务器地址)
  • method:   表单数据发送到服务器的方法 常用的方法有两种: post 和  get.
  • 这里也可以添加target="_blank" 属性
  • enctype : 表单发送到服务器的的编码格式

get 和 post的区别:

  • get方法提交 , 通过地址栏来传递信息,数据会附在网址之后主动提交给服务器. get是从服务器上获取数据, form表单默认提交方式是get  .确定安全性差,用户名和密码会附在网址后面.
    •  

  • post方法提交:数据不会附在网址之后,会将数据打包发给服务器,等候服务器读取数据来进行处理.post是向服务器传送数据。以后学数据库时会用到. 安全性高,网址后不会附你的用户名和密码

  

  •  enctype 属性:

熟悉表单元素<form>的小伙伴,对其中的属性enctype一定不会陌生,就是它规定了对表单提交给服务器时表单数据编码的内容类型(Content Type)。

知道了表单编码由enctype决定的,那么它究竟有多少可选的取值呢?是不是所有的MIME类型它都能用呢?
实际上,根据HTML5 规范中所叙述的,enctype具有以下三种选项,其中最后一项text/plain是相比4.01新增的。

  • application/x-www-form-urlencoded

  • multipart/form-data

  • text/plain

application/x-www-form-urlencoded

这是默认的编码类型,使用该类型时,会将表单数据中非字母数字的字符转换成转义字符,如"%HH",然后组合成这种形式key1=value1&key2=value2;所以后端在取数据后,要进行解码。

注意:

  • 若表单中有文件,则只留文件名;

method为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。

multipart/form-data

当method为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary)。

    • 一般来说,methodenctype是两个不同的互不影响的属性,但在传文件时,method必须要指定为POST,否则文件只剩下filename了;

    • 当没有传文件时,enctype会改回默认的application/x-www-form-urlencoded

 text/plain表单数据中的空格转换为 "+" 加号,但不对特殊字符编码。(get方式会这样,post时不会)

input :  

  •    用来设置表单中的内容项,比如表单中的文本输入
  • 还可以在表单外使用

input元素的属性:

  1. type指定输入内容的类型,默认为text 单行文本框.
  2. name:输入内容的识别名称,传递参数时的参数名称,在服务器中对应着value,相当于value的key, 用来区分不同的文本框.
  3. value:表单提交时对应项传的值
    • type="button", "reset", "submit"时,为按钮上显示的文本内容
    • type="text","password","hidden"时,为输入框的默认值意思是不用输入就会显示
    • type="checkbox", "radio", "file",为输入相关联的值.

   4.maxlength:设置最大字数的限制,汉字字符数字相同.

   5.checked=" checked"  设置默认选中项,针对单选框,多选框有用.

   6. selected="selected" : 设置下拉选中项,针对 select 有用

   7 multiple='multiple' : 设置下拉多选项

'''
<1> 表单类型

type:        text 文本输入框

             password 密码输入框

             radio 单选框 只有将name值设置相同的时候才会出现单选效果,否则会出现多选效果

             checkbox 多选框  

             submit 提交按钮            

             button 按钮(需要配合js使用.) button和submit的区别?

             file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
            
            上  传文件注意两点:
          请求方式必须是post
          enctype="multipart/form-data"

 <2> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别:name属性是和服务器通信时使用的名称;
           而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

                type="button", "reset", "submit" - 定义按钮上的显示的文本
                 
                type="text", "password", "hidden" - 定义输入字段的初始值
                 
                type="checkbox", "radio", "image" - 定义与输入相关联的值


checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使. 输入框内的信息不能输入时灰色

'''

select标签:下拉列表

  下拉列表语法

下拉分组:

 代码:

 Label:分组名称

 

效果:

 

'''
 <select> 下拉选标签属性


          name:表单提交项的键.

          size:选项个数

          multiple:multiple 
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项 属性:

                       value:表单提交项的值.   
                       selected: selected下拉选默认被选中

'''

 

<textarea> 多行文本框标签

'''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“控制输入每行的字符” rows=“控制输入的行数” name=“名称”>
                   默认内容
        </textarea>
</form>

'''*

效果

 文件上传控件

 <input type="file" name="file">

效果:

<label>标签

定义:<label> 标签为 input 元素定义标注(标记)。如果想点击框内的内容或按钮,直接点击label标签的内容就可以了
说明:
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

复制代码
'''

<form method="post" action="">
        <label for=“username”>用户名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

'''

效果:

 

 按钮系列控件

提交按钮 :<input type="submit">: 
普通按钮:不能实现提交功能,配合JS 使用
<input type="button" value="普通按钮">
效果:

  图片按钮: 可以是实现提交功能

<input type="image" src="p1.jpg">

效果:

重置按钮: 把内容还原到默认状态

<input type="reset" >

 iframe(inner Frame)内联框架

iframe元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,它是body的子集,和body是父子关系,iframe作为一个普通元素放在body里。

说白了就是在当前页面中插入另一个页面。

属性:

  1. width可设置内联框架的宽。
  2. height可设置内联框架的高。
  3. name可设置框架的名称。
  4. src可设置页面的路径
  5. scrolling规定是否在iframe中显示滚动条(yes,no,auto)
  6. frameborder规定是否显示框架周边的边框(1默认有边框,0无边框)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!--IE浏览器最高渲染-->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--为了确保适当的绘制和缩放-->
    <title>iframe框架的使用</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<address>
    北京海淀区。西三旗桥东。神州科技园
</address>
<hr>
<iframe src="https://www.baidu.com/" name="topifame" frameborder="0" width=100% height="300px"></iframe>
<hr>
<a href="https://www.baidu.com/" target="topifame">百度</a>
<a href="https://www.sina.com.cn/" target="topifame">新浪</a>

</body>
</html>

 

 效果图

当你点击新浪时,iframe的框架内会显示新浪的网页,反之会显示百度的页面

 

 

 

posted on 2017-12-20 16:39  程序员一学徒  阅读(10068)  评论(0编辑  收藏  举报