HTML(基础笔记)

1、注释:<!-- 需要注释的内容-->>

2、标题标签:h1-h6

文字会变大,1-6文字逐渐减小

文字都有加粗

独占一行

3、段落标签:<p></p>

段落之间有间隙

独占一行

4、文本标签:<span></span>

一行可以有多个

5、换行:<br>

单标签

让文字强制换行

6、水平线:<hr>

单标签

在页面中显示一条水平线

7、文本格式化标签

加粗:   <b></b>        <strong></strong>

下划线: <u></u>        <ins></ins>

倾斜:   <i></i>        <em></em>

删除线: <s></s>        <del></del>

后者比前者更能强调语境

8、图片: <img src="" alt="">

标签属性写在开始标签内

可以同时有多个属性

属性之间用空格隔开

标签名与属性之间用逗号隔开

属性无顺序之分

src:图片地址

alt:替换文本  (当图片加载失效时,显示alt文本)

              (当图片加载成功时,不显示alt文本)

title:提示文本(鼠标悬停时出现文本)

              (不仅可以用于图片标签,还可用于其他标签)

width、height:宽度、高度(只设置一个另一个等比例缩放)

                        (两个都设置图片可能会变形)

9、音频:<audio src=""></audio>

        src:路径

        controls:播放控件

        autoplay:自动播放

        loop:循环播放

        支持三种格式:MP3、Wav、Ogg

10、视频:<video src=""></video>

        src:路径

        controls:播放控件

        autoplay:自动播放

        loop:循环播放

        支持三种格式:MP4、Webm、Ogg

11、路径:

绝对路径:从盘符开始查找

相对路径:从当前文件夹开始查找目标文件

相对路径分类:同级目录:方式一:<img src="目标图片" alt="">

                      方式二:<img src="./目标图片" alt="">

             下级目录(图片在文件夹内):<img src="文件夹名/目标图片" alt="">

                                        (要先知道在那个文件夹->文件夹名)

                                        (进入文件夹/)

             上级目录(html文件在文件夹内):<img src="../目标图片" alt="">

                                          出当前文件夹,到上一级目录->../

12、超链接(锚链接):<a href="跳转地址">内容</a>

                    href:跳转地址(#代表空地址)

                    target:目标网页打开方式(规定在何处打开目标链接)

                    (_self:覆盖原网页)

                    (_blank:在新窗口打开)

13、无序列表:<ul></ul>表示无序列表整体,用于包裹li标签

             <li></li>表示无序列表每一项,用于包含每一项内容

             特点:每一项前默认显示原点标识

             注意:ul只可以包含li

                  li可以包含任意内容

14、有序列表:<ol></ol>表示有序列表整体,用于包裹li标签

             <li></li>表示有序列表每一项,用于包含每一项内容

             特点:每一项前默认显示序号标识

             注意:ol只可以包含li

                       li可以包含任意内容

15、自定义列表:<dl></dl>表示自定义列表整体,用于包裹dt、dd

               <dt></dt>表示自定义列表主题

               <dd></dd>表示自定义列表每一项

               特点:dd前有默认缩进效果

               注意:dl只可包含dt、dd

                    dt、dd可以包含任意内容

16、表格:<table></table>表格整体包含多个tr

         <tr></tr>表格行包含多个dd

         <td></td>表格列包含内容

         <caption></caption>表格大标题(表格整体登部居中显示)

         <th></th>表头单元格(表格第一行文字加粗居中)

         注意:table>tr>td

              caption写在table内部

              th写在tr内部用于替换td

17、表格结构标签:<thead></thead>头部

                 <tbody></tbody>主体

                 <tfoot></tfoot>底部

                 注意:结构标签内部用于包裹tr

                      结构标签可以省略

18、合并单元格:rowspan 值:合并个数  跨行合并,垂直合并

               colspan 值:合并个数  跨行合并,水平合并

               注意:左上原则:上下合并->保留最上的,删除其他

                             左右合并->保留最左的,删除其他

                    同一个结构标签可以合并,不可跨结构标签合并

19、表单标签:<input type="">

             type:类型:text:文本框,用于输入文本

                       password:密码框,用于输入密码

                       radio:单选框,用于多选一

                       checkbox:多选框,用于多选多

                       file:文件选择,用于上传文件

                       submit:提交按钮,用于提交

                       rest:重置按钮, 用于重置

                       button:普通按钮,无功能

                       color:颜色,用value设置具体颜色

                       time:时间,包括小时和分钟

                       date:日期,包括年月日

                       email:邮件,可以输入一个email地址自动验证

                       number:数字框,提供步进箭头使数字增加或减少

                       range:拖动条

                       search:搜索框

                       tel:电话号码框

                       url:网站框,提交前会自动检查      

             placeholder:占位符

             name:分组,有相同name的为一组

             cheked:默认选中

             multiple:多文件选择

             value:添加按钮显示文字

             maxlength:文本框允许输入最大字符

             readonly:文本框内容不允许

             size:该元素宽度

20、按钮:<button type="">按钮内容</button>

         type属性:submit:提交按钮

                  reset:重置按钮

                  button:普通按钮

21、下拉菜单:<select name="" id=""></select>下拉菜单整体

             name:名字

             size:显示多个选项

             multiple:允许用户选择多个

             disabled:禁用下拉列表,使其不能再获得焦点或被修改。被禁用后,它的值不会提交

             <option value=""></option>下拉菜单每一项

             selected:默认选中

             value:定义当下拉列表在提交时,发送给服务器的值

             disabled:禁用列表中的某一项

22、文本域:<textarea name="" id=""></textarea>

           cols:文本域可见宽度

           rows:文本域可见行数

           maxlength:文本最大输入数

           wrap:soft:提交文本换行失效

                hard:提交文本换行生效

23、绑定内容与表单标签:<label for=""></label>

    使用方法1:使用label标签把内容包裹起来

             在表单标签上添加id属性

             在label标签的for属性设置对应的id属性值

    使用方法2:直接使用label标签把内容和表单标签一起包裹

              把label中的for属性删除

24、<form action=""></form>:action:地址:提交表单时向何地发送数据

                            autocomplete:on:是否启用表单自动完成功能

                                         off

                            name:名字:表单名称

                            target:-blank:在何处打开action的地址

                                   -self

                                   -parent

                                   -top

                            method:get:用于发送表单数据的HTTP方法

                                   post

                                   

25、规定一个内联框:iframe

属性            值

src             地址           规定在irame中显示文小当的地扯页面中的HTN内容是示在过rame中

srcdoc          HTML-ccode     页面中的HTML内容显示在iframe中

seamless        seamless       iframe看起来像父文档样中的一部分

scrolling       yes            是否在iframe中有滚动条

                по             H5不支持

                auto

паmе                           iframe的名字

frameborder     0              是否显示周围边框

                1

26、盒子:<div></div>

         一行只显示一个

         独占一行

27、字符实体:在网页展示特殊符号效果

             结构:&英文

             常用:&nbsp   空格

28、布局标签:header  网页头部

             nav     网页导航

             footer  网页底部

             aside   网页侧边栏

             section 网页区块

             article 网页文章


 

H5新增表单控件

29、output用于表示计算或操作的结果


 

H5表单控件新增属性

30、formaction:多提交地址(可设置的个action)

31、formethod:多个提交方式(多个methed)值只可为get、Post

31、formtarget:多个打开方式(多个target)

32、placeholder:主要用在文本框,规定可描述年输入字段的提示信息

33、autocomplete:自动补全功能,在之输入的条目被保存的情况下浏览嚣会提示相关条目

34、autfcus:打开当前页面自动获得焦点

35、list:指定一个可用列表,当用户在文本框中输入时会根据输入符显示下拉列表提示与datalist结合使用,不显示在页面上

为list提供数据源与select(下拉列表)语法相同option创建项,datalist创建下拉列表实际使用时将inpt的list属性值设为datalist的id值就可实现关联

36、pattern:验证表单输入内容

37、novalidate:不验证表单输入内容

38、rceguired:必填或必选否则不可提交

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值