01html学习笔记

一、标签的分类

1、块级：

显示为块状，独占一行，自动换行，每个块状标签都隔一行

1、标题标签

<h1></h1>标题标签，为黑体加粗，共6种，h1-h6，h1最大h6最小

2分割线标签：

<hr/>表示一条水平线

3、段落标签

<p></p>表示文章一段

4、换行标签

<br/>在代码中，直接回车换行无法识别，必须使用<br/>

5、预格式

<pre></pre>会保留代码中的空格回车等符号，直接在浏览器中显示，常用在代码输入时使用

6、块引用标签

<blockquote></blockquote>表示一段话从其他网站引用的，有一个重要的属性，cite="表示这段话引用来源，常方一个网址，浏览器默认显示前空俩格。

7、div最常用的标签

2、行级：

在一行中从左到右依次排列，不会自动换行。

1：常见的行级标签

span（文本）

img（图片）

em（强调）

strong（强调）

q（短引用）

a（超链接）

i（倾斜）

b（加粗）

small（缩小字体）

无序列表：

<ul>

<li>这是无序列表第一项</li>

<li>这是无序列表第二项</li>

</ul>

有序列表：

<ol>

<li>这是无序列表第一项</li>

</ol>

定义列表

<dl>

<dt>这是dl列表的标题</dt>

</dl>

二：块级标签与行级标签的区别

(1)：块级标签：默认宽度100%（占满一行）；

  块级标签自动换行（右边不能有东西）；

  可以使用CSS设计宽度高度。

(2)：行级标签：默认宽度由内容撑开；

一行当中，从左往右依次排开；

宽度高度不能设置。

三、路径：

　1、相对路径：相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。

2、绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径

例：以/开头代表根目录，优先选择相对路径。

图片与当前文档在同一层文件夹，直接写图片名；<img src="icon.jpg/">

 图片在当前文档的下一层文件夹，文件夹名/图片名；<img src="img/icon.jpg /">

图片在当前文档的上一层文件夹，../图片名    < img src="../icon.jpg /">

 一定要注意：图片必须包含在项目里面，不能访问项目外的图片

四、表格table：

     表格用table表示，行用tr表示，列用td表示。
     th表示的是表头，表头中的文字默认为居中加粗，th要在tr中，用于替换掉td
     常见属性
     1、border:给表格加边框，默认给所有td，并且给整个table加外边框，当增大border的值，td的边框不变，只有最外面边框
     变宽
     2、cellspacing：单元格与单元格之间的距离。
       cellspacing="0"表示单元格与单元格之间没有距离，但是边框的宽度依然是俩条线的宽度。
       表格边框合并的css写法：
       style="border-collapse：collapse"
       这条css与cellspacing="0"的区别：
       cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格俩条线依然还是两条线，
       border-collapse：collape；是将表格相邻的两条半框进行合并处理，只有一条边框存在。
      3、cellpadding：表示单元格中文字与边框的距离；
      4、height：
         width：<table height="400"width="500"></table>
         使用css样式实现：
         <table style="height:400px;width:500px;"></table>
       5、align：设置表格在浏览器的位置，不建议使用
         left center right
       6、bgcolor:背景色
         bordercolor  边框颜色
         background  背景图
            他俩同时存在背景图覆盖背景色
       tr与td常用属性：
       1、width:
       2、height：
       3、align：设置单元格中的文字对齐方式
       center left right
         valign：垂直对齐方式
           top middle bottom
        4、nowrap="nowrap"当单元格文字过多时，设置单元格不断行显示，但是，会把表格的快读撑大！！
        表格的跨行与跨列：
        1、跨列：在td上使用属性colspan="n"进行跨列，如果一个单元格跨n列，则单元格右边的n-1单元格要去掉
        2、跨行：在td上使用属性rowspan="n"进行跨行，如果一个单元格跨n行，则单元格右边的n-1单元格要去掉
     合并列是必须保证每行中，colspan的累加和是相等的
     合并行时，具有rowspan的单元格属于它所跨越的每一行，计算colspan的累加和，

五、表单form
     1、form俩个重要属性：
        ①action：表单提交地址
        ②method：表单提交数据方式 get post
        get与post区别：
        get用URL传递数据所有数据在URL能看到，而post不能
        get传递数据不安全，而post传递数据安全
        get能够传递数据量有限，只能传递文本信息，而post可以传递图片 视频等数据量大
        get传输速度快
        get用URL传递数据格式http：//url地址.html?name=value1&name=value2
           所以使用表单时input中属性name一定要写，否则不会往后台传递数据
     2、input常用属性：
          ①type：声明输入框类型，
          ②name：给输入框起名字，name=value传递
          ③value：input输入框的默认值存储用户输入的数据
          ④placeholder：输入框的提示文本，输入时自动消失。
          ⑤checked="checked"：设置单选框和复选框的默认选中
          ⑥disabled="disabled"：设置input禁用，一旦用disabled禁用输入，在传递数据时不再往后台传递数据
          ⑦hidden="hidden"：隐藏 隐藏输入框但数据可以传递到后台
              相当于<input type="hidden" name="hidden"value="123"/>
        type类型：
          ①text    （文本输入）      
          ②password 密码输入显示黑点）
          ③radio: 表示input单选框 radio中value不能省略，往后台传递数据时，传递的是value的值。
          凭借name的值来判断是否为同一组标签，name相同为一组，同一组只能选一个使用checked=checked这种属性名等于属性值的写法可以省略属性值
           ④checkbox：复选框  其他要求同radio
           ⑤file：文件上传框，点击上传文件
           ⑥submit：提交表单
           ⑦resect：重置按钮，点击使表单回复初始状态
           ⑧image：图形提交按钮，使用src导入图片，与submit都具有提交表单功能。
           ⑨button：按钮  只是按钮形状，没有任何作用。
        4、select：下拉选择区块
           ①<select></select>标签中有多个选项，用<option></option>表示
           ②一个<select name="" id=""></select>只能有一个name，所以使用时需要给select起name，而不是option
           ③option标签，如果有value属性，传递value如果没有就传递<option ></option>中间文字 
           ④title：表示鼠标指上显示的文字
           ⑤给option加selected="selected" 表示默认选中项
           ⑥给select加multiple="multiple" 多选      
           ⑦<optgroup label="组名"></optgroup>用于分组
                 所以 完整的select的下拉结构如下：
                 <select name="city" id=""multiple="multiple">
                         <optgroup label="沿海">
                     <option value="">青岛</option>
                     <option value="" selected="selected">烟台</option>
                     </optgroup>
                     <optgroup label="内陆">
                     <option value="">济南</option>
                     <option value="">潍坊</option>
                     </optgroup>
                   </select>
          5、textarea文本域
          ①文本域可以用cols rows 但不用可以用style="height:50px;width:200px;"设置
          cols rows name
          ②使用css样式style="resize:none;"设置文本域禁止缩放
          ③使用属性readonly="readonly"设置文本域只读，不可以修改
          ④css样式overflow用于设置超出区域的文字如何显示
            可选值三个：
            hidden：超出区域的文字直接隐藏，无法看到
            scroll：无论文字多少，都会显示水平和垂直方向的滚动条
            auto：默认效果，文字多少都没有滚动条，文字多自动显示垂直滚动条
            也可以用overflow-x oveflow-y单独设置
          6、HTML5智能表单
          ①h5为我们提供input与form的关联方式
          <form id="form1"></form>
          <input form="form1"/>
          ②h5提供的新属性：
          placeholder：输入框默认提示内容
          form 让表单外面的input关联id 实现input与form表单的关联
          required="required 设置input为必填
         autofocus="autofocus" 自动获取焦点
         autocomplete="on" 关闭自动提示完成功能 on  off
            可以给form标签添加autocomplete属性，设置整张表单的自动完成功能是否开启，
            如有个别不同的input，可以单独设置