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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值