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，可以单独设置