ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

HTML学习笔记.2

HTML学习笔记.2 1关于路径的分类路径分为两种即相对路径和绝对路径相对路径以当前位置作为参考点当导入图片时用./引入同一文件夹的内容/引入下一级的内容…/引入上一级的内容。当想使用的文件与参考点极差大于1时可以重复使用./或…/的符号。例如img src../../../图片.jpg绝对路径一般以根位置为参考点建立路径也就是说使用相对路径时在移动文件时容易造成渲染错误但绝对路径没有这个缺点。绝对路径又分为本地绝对路径和网络绝对路径但因为本地绝对路径只能识别本机内容所以使用较少而网络绝对路径则经常被使用。若服务器开启防盗链图片可能引入失败。2关于常见图片格式图片格式很多以上为平时常见的图片格式它们各有优缺点比如.jpg占用空间小支持颜色多但**无法支持透明背景无法支持动图且图片噪点最多。**其他各格式也有自己的优缺点详细看上表。值得注意的是.webp形式近年发展迅速逐渐称成为网页开发最主流的格式。3关于跳转网页使用a可以实现网页跳转。该标签有几个重要的标签属性最重要的是href,href后接路径例如看视频这串代码在运行时就会显示一个蓝色的“看视频”点击之后就会跳转到相应的路径同理.jpg,.gif,.pdf等格式也支持跳转但是.zip格式不支持跳转。这种压缩包需要用专业的软件才能成功打开比如7-zip。当对.zip格式的文件进行跳转时会自动触发下载。但对于其他格式的文件使用download这一标签属性也能进行强制下载。4关于超链接之前说过html的中文全称为超文本标记语言那超链接指的又是什么呢超链接通俗的讲就是一串字你点击后能从当前的网页跳转到其他网页。超链接对于的标签名就是刚刚说的a。这个标签对应的另一个属性就是target当target后面跟的值为_self,时网页就会在本标签页打开代表的软件有谷歌浏览器若值为 ——blank,则会在新标签页进行跳转常见的软件有百度。值得注意的是在不使用该标签时会默认在本页签打开新网页。5关于锚点锚点就是网页中的一个标记点通常有两种模式设置锚点。分别是用a标签配合name属性和其他标签配合id属性。当使用id属性时最好别是数字开头但实际上以数字开头是不会渲染错误的不过用数字开头就是不准确。进行跳转锚点的时候同样要用到href属性详细内容看上图。6关于列表列表分为有序和无序两种有序使用ol无序使用 ul。列表内还可以嵌入li标签同样的甚至可以多次嵌入如下图但li标签一般不单独使用并且一般嵌入不超过三层。7关于自定义列表自定义列表就是个包含术语名称和术语描述的列表。其中术语名称用dt标签术语描述则用dd标签。dl标签通常代表自定义列表一般和前者配合使用无实际意义。8关于表格表格一般含有表格标题表格头部表格主体和表格脚注。它们分别用caption,thead,tbody和tfoot表示。行则用tr表示头部单元格用th表示其他部位单元格用td表示一个比较完整的表格可以这样书写·同样的每个单元格也可以赋予各种属性如下前4个可以控制字在单元格内的位置而后两个则可以控制单元格跨行的行数或列数。9关于补充有些常用的标签可以适当补充如br可以执行换行hr可以进行分割pre可以使内容按原文显示即不自动省略空格和换行。但有一点必须强调不能为了使用这些标签的效果就去使用要更看重它们所富含的语义。10关于表单表单常使用的标签有三个forminput和button。关于form的target属性与前文超链接处使用方法和效果类似不做介绍action用于指定提交地址一般是网址。input前文也有所介绍用于建立输入框type属性可以修改输入框的类型name用于指定数据名称。如百度使用wd,而京东等软件则使用keyword。其他属性比如value和maxlength也可以对input进行调整主要用于调整初始的默认输入值和输入框的输入上限。type可以对输入框的类型进行修改前文举过例子当值为password时输入内容会用代替。但其他值也会造成影响*详细看上图。button标签的用法与input标签的部分用法类似但有些细微的不同之处比如button不需要写value来指定按钮的内容并且 button默认type值为button所以可以直接当按钮使用。表格中还有一个特殊的东西叫下拉框主要通过标签select实现option用于设置下拉框的选项使用disabled可以把选项设置为不可选该方法同样适用于input等标签11关于label标签label标签用于与表单控件相关联关联后点击对应文字就会选择相应选项。通常实现这种效果有两种方法一种是用id属性让label标签的for属性值等于表单控件的id第二种方法则是直接用label把这些东西套起来。fieldset和legend可以实现对表单的分组详细方法如上这里只做了解。11以上图片是对表单内容的总结。12关于框架标签iframe通常用于在网页中嵌入其他文件常见的有广告等。iframe可用的属性很多包括name,width等与上文用法类似。Frameborder用于是否显示边框0为不显示1为显示。13我们平时在写代码的时候有些内容无法正常显示有些内容难以打出于是我们会使用上图的实体名称或实体编号代替一般记忆实体编号。如果想打的内容并未在此列出可自行上网查询。
返回列表