web 一

一、Web概述
   1.Web三要素      HTML部署在服务器上，运行在浏览器上
     -浏览器：向服务器发送请求，下载服务器中的网页（HTML），然后执行HTML显示出内容。
     -服务器：接受浏览器请求，发送相应的HTML到浏览器  
     -HTTP协议


二、HTML简介
   1.XML和HTML的对比
     -XML 
      --可扩展（自定义）标记语言
      --标签、属性、标签、之间的嵌套关系都可以扩展
      --通常用来存储或传输数据
     -HTML （HyperText Markup Lauguage）
      --超文本标记语言
      --标签、属性、标签之间的嵌套关系都已经固定了（w3c）
      --某些版本的HTML就严格满足XML的规范
      --可以简单的将HTML理解为标签固定的XML
      --用来显示数据


      元素：包含标签、属性、文本
       www.w3school.com.cn  手册。
       
       单标签元素：<meta/>   <br/>   <img/>   <input/>   <link/>
     ##标题元素
     ##段落元素
     ##列表元素
     ##分区元素
     ##行内元素：
       <span></span>:没有特定的含义，但可以用来为部分文本设置样式属性
       <i></i> :用来定义斜体字
       <b></b> :用来定义粗体文字
       <u></u> :用来定义带下划线文字
       <strong></strong>:用来定义加重文字
       <del></del>:用来定义带删除线的文字
       <em></em>:用来定义着重文字
       <br>或<br/>:在任何地方创建手工换行


     ##图像元素：<img src="" width="" height=""/>   src属性必不可少，路径可以写相对路径和绝对路径。一般情况写相对路径
     ##超链接元素：
        -<a href="" target="">文本</a>     href属性比不可少          target属性：目标打开方式，可取值为_blank和_self
        -锚点：用于链接到文档中的某个位置
      <a name="锚点名">锚点文本</a>
      <a href="#锚点名">回到锚点文本位置</a>
     ##表格：
        -定义表格<table></table>
 -创建行：<tr></tr>
 -创建列：<td></td>
-表格常用的属性：
 -<table>元素:
         --border:定义表格边框的线条粗细
 --width:通过设定可以使表格变宽（每个单元格都会变）
 --height：通过设定可以改变tbody中的单元格的高度
 --align(调整表格在页面中的位置) 
 --cellpadding(单元格边框与文本的间距)   
 --cellspacing(单元格之间的间距)
 -<tr>元素：可以包含一个或多个 th（表头元素，默认加粗） 或 td 元素。
         --align:通过设置，可以让行文本在单元格中center/left/right（定义表格行的内容对齐方式）
         --valign:通过设置，可以让行文本在单元格中（规定表格行中内容的垂直对齐方式）
          如果不同过align属性设置内容对齐方式或不通过内联样式设置text-align设置文本对齐方式的话
  默认向左对齐
          值：baseline和top（向单元格顶部靠拢）   middle居中     bottom向下对齐（向单元格底部靠拢）
 -<td>元素：align/valign width height colspan(跨列) rowspan(跨行)
-行分组：
 -表头行分组<thead></thead>
 -表主体行分组<tbody></tbody>
 -表尾行分组<tfoot></tfoot>
-表格特有的样式属性：
 -如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框。
 -若想消除双线边框，可用border-collapse:separate/collapse;
     ##表单概述
        -表单用于显示、收集信息，并提交信息到服务器
-表单二要素：form元素、表单控件
-表单就是从浏览器向服务器传输的手段
-定义表达：<form></form>，属性action(必不可少)：设置表达提交的目标。method和enctype将来再讲。
-表单控件：是一种HTML元素，是信息输入项     所有的表单控件都可以加name属性，用于给该控件的数据命名
 --<input>元素   
   -文本框：框名<input type="text"/>     包含属性：value(设置默认值)  maxlength(限制输入的字符数-中英都占一个字符)  readonly(设置文本控件只读)
            -密码框：框名<input type="passworld"/>  包含属性：value(设置默认值)  maxlength(限制输入的字符数)  readonly(设置文本控件只读)
   -单选框：<input type="radio"/>框名       name属性(给框声明一个组名，同一组的radio自动互斥) checked(默认选中)  value--将来再讲
   -多选框：<input type="checkbox"/>框名    checked(默认选中)   name/value属性--将来再将
           ***radio和checkbox需要设置value属性，就是要传递给服务器的具体的值
   -隐藏框：<input type="hidden"/>   就是看不见的文本框;用来传一些秘密的数据，该数据通过value属性来设置
   -文件筐：框名<input type="file"/>  用来上传文件
            -按钮：
        -提交按钮：<input type="submit" value="按钮名"/>    *提交表单内的数据 
-重置按钮：<input type="reset" value="按钮名"/>     *将表单数据还原成初始的状态
-普通按钮：<input type="butt on" value-"按钮名"/>   *默认没有功能，需要些javascript自定义功能
 --其他元素
   -标签：label，用来管理表单中的文本，可以将文本与框绑定在一起，从而增加框的点击面积
          给框加上唯一标示id，利用label元素的for属性：for="id值"
  <input type="checkbox" id="id值"/>
  <label for="id值">文本</label>
   -下拉选：下拉选择内容
        -语法：
   城市
   <select>
<option>请选择</option>
<option selected>北京</option>   selected默认选中
<option>上海</option>
<option>广州</option>
<option>成都</option>     
   </select>
    -文本域：相当于多行文本框、超大的文本框
   -cols属性:指定文本区域的列数（中文一个字符占一列，英文两个字符占一列）
   -rows属性:指定文本区域的行数
   -readonly属性：设置只读
           <textarea >文本</textarea>        
  ###文本元素包含：标题元素、段落元素、列表元素、分区元素、行内元素


  ###简要描述行内元素和块级元素的区别。
参考答案:
块级元素的前后都会自动换行，如同存在换行符一样。默认情况下，块级元素会独占一行。例如，<p>、<hn>、<div>都是块级元素。在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。
行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。例如，<a>、<span>等。
我们可以这样理解：如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；而元素如果是行内的，那么只能在当前行中显示，就像是段落中的一个单词。
因此，块级元素常用来构建网页上比较大的结构，用于包含其他块级元素、行内元素和文本；而行内元素一般只能包含其他行内元素和文本。