相关链接​​​​​​​HTML学习一 HTML学习二HTML常用标签1) 标签语义学习标签是有技巧的重点是记住每个标签的语义。简单理解就是指标签的含义即指这个标签是用来干嘛的。根据标签的语义在合适的地方给一个最为合理的标签可以让页面结构更清晰。2) 标题标签目的: 为了使网页更具有语义化我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即h1-h6.标签语义: 作为标题使用并且依据重要性递减。特点:a,加了标题的文字会变得加粗字号也会依次变大b,一个标题独占一行示例:h1 这是一个一级标题 /h13) 段落和换行标签段落标签目的在网页中要把文字有条理地显示出来就需要将这些文字分段显示。在HTML标签中,p标签用于定义段落它可以将整个网页分为若干个段落。标签语义: 可以把HTML文档分割为若干个段落。特点:a、文本在一个段落中会根据浏览器窗口的大小自动换行b、段落和段落之间保有空隙示例:p这是一个段落标签/p换行标签目的: 在HTML中一个段落中的文字会从左到右依次排列直到浏览器的右端然后才自动换行。如果希望某段文本强制换行显示就需要使用换行标签br /.标签语义: 强制换行特点:a、br /是个单标签b、 br /标签只是简单地开始新的一行跟段落不一样段落之间会插入一些垂直的间距4) 文本格式化标签目的 在网页中有时需要为文字设置粗体、斜体、或下划线等效果这时就需要用到HTMl中的文本格式化标签使文字以特殊的方式显示。标签语义: 突出重要性比普通文字更重要。加粗 strong/strong或b/b 更推荐使用strong标签加粗语义更强烈倾斜 em/em或i/i 更推荐使用em标签语义更强烈删除线 del/del或s/s 更推荐使用del标签语义更强烈下划线 ins/ins或u/u 更推荐使用ins标签语义更强烈5) div和span标签目的 div和span是没有语义的它们就是一个盒子用来装内容的。解释: div是division的缩写表示分割、分区span意为跨度、跨距。特点:a、div标签用来布局但是一行只能放一个dIv标签(大盒子、块级元素)b、span标签用来布局一行上可以放多个span标签(小盒子、行内元素)示例div这是一个div元素/div span这是一个span元素/span6) 图像标签和路径a、图像标签(单标签)目的 在HTML标签中,img标签用于定义HTML页面中的图像特性src是img标签的必须属性它用于指定的图像文件的路径和文件名示例img srcsourceURL /图像标签的其它属性属性 属性值 说明src 图片路径 必须属性alt 文本 替换文本图像不能显示时显示的文字title 文本 提示文本鼠标放到图像上显示的文字width 像素 设置图像的宽度height 像素 设置图像的高度border 像素 设置图像的边框粗细图像标签注意点:a、图像标签可以拥有多个属性必须写在标签名的后面b、属性之间不分先后顺序标签名与属性、属性与属性之间均以空格分开c、属性采取键值对的格式即keyvalue的格式属性属性值d、在设置图片宽高时(即width、height)只需设置其中一个属性可保持图片按比例缩放不变形2) 路径(前期铺垫知识)a、目录文件夹和根目录目的: 实际工作中我们的文件不能随便乱放否则用起来很难快速地找到它们因此我们需要一个文件夹来管理它们。目录文件夹: 就是普通文件夹里面存放了我们做页面时所需要的相关素材比如html文件、图片等。根目录: 打开目录文件夹的第一层就是根目录b、VScode打开目录文件夹操作: 文件- 打开文件夹选择目录文件夹后期非常方便管理文件。c、路径可以分为相对路径和绝对路径相对路径: 以引用文件所在位置为参考基础而建立出的目录路径简单来说就是图片相对于HTML页面的位置相对路径分类同一级路径 符号:无 说明:图像文件位于HTML文件同一级如img srcimg.png相对路径分类: 下一级路径 符号:/ 说明:图像文件位于HTML文件下一级如img srcimages/img.png相对路径分类: 上一级路径 符号: ../ 说明:图像文件位于HTML文件上一级如img src../img.png相对路径是从代码所在的这个文件出发去寻找目标文件而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置绝对路径: 是指目录下的绝对位置直接到达目标位置通常是从盘符开始的路径例如: D:\web\a\b.xxx或完整的网络地址 https://www.baidu.com/a/b.xxx7) 超链接标签目的: 在HTML标签中a标签用于定义超链接作用是从一个页面链接到另一个页面。a、链接的语法格式示例:a herf跳转目标 target目标窗口的弹出方式 文本或图像 /a属性href(必须属性) 作用: 用于指定链接目标的url地址当为标签应用href属性时它就具有了超链接的功能属性: target 说明: 用于指定链接页面的打开方式其中_self为默认值(在当前窗口打开页面)_blank为在新窗口中打开方式b、链接分类1、外部链接:a href百度一下你就知道百度/a2、内部链接: 网站内部页面之间的相互链接直接链接内部页面名称即可。a hrefindex.html首页/a3、空链接如果当时没有确定链接目标时可使用空链接a href#首页/a4、下载链接: 如果href里面地址时一个文件或者压缩包会下载这个文件a hrefimg.zip下载链接/a5、网页元素链接: 在网页中的各种网页元素如文本、图像、表格、音频、视频等都可以添加超链接​a href必应img srcimg.png //a(图像跳转链接)6、锚点链接:点击链接可以快速定位到页面中的某个位置步骤:A、在链接文本的href属性中设置属性值为#名字的形式h3 idtwo 第二季介绍 /h3B、找到目标位置标签里面添加一个id属性名字a href#two第二季 /a8) 表格标签1表格的主要作用目的: 表格主要用于显示、展示数据因为它可以让数据显示的非常规整可读性非常好。特别是后台展示数据的时候能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现地很有条理。总结: 表格不是用来布局页面的而是用来展示数据的。2) 表格的基本语法a、table/table是用于定义表格的标签b、tr/tr标签用于定义表格中的行必须嵌套在table/table标签中c、td/td用于定义表格中的单元格必须嵌套在tr/tr标签中d、字母td指表格数据(table data)即数据单元格的内容示例table tr td单元格中内容/td ... /tr /table3) 表头单元格标签定义: 一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示语法: th标签表示HTML表格的表头部分(table head)4) 表格属性5) 表格结构标签使用场景: 因为表格可能很长为了更好的表示表格的语义可以将表格分割成表格头部和表格主体两大部分分别用:thead标签表格的头部区域tbody标签表格的主体区域这样可以更好的分清表格结构。a、thead/thead: 用于定义表格的头部thead内部必须拥有tr标签一般是位于第一行b、tbody/tbody用于定义表格的主体主要用于放数据本体c、以上标签都是放在table/table标签中9) 合并单元格目的: 特殊情况下可以把多个单元格合并为一个单元格a、合并单元格方式b、目标单元格c、合并单元格的步骤10) 表格总结a、表格的相关标签b、表格的相关属性​​​​​​​c、合并单元格11) 列表标签目的: 表格是用来显示数据的那么列表就是用来布局的。列表的最大特点就是整齐、整洁、有序它作为布局会更加自由和方便根据使用场景不同列表可以分为三大类: 无序列表、有序列表和自定义列表a、无序列表语法: ul标签表示HTML页面中项目的无序列表一般会以项目符号呈现列表项而列表项是使用li标签定义注意:1、无序列表的各个列表项之间没有顺序级别之分是并列的2、ul/ul中只能嵌套li/li,直接在ul/ul标签中输入其他标签或文字的做法是不被允许的3、li/li之间相当于一个容器可以容纳所有元素4、无序列表会带有自己的样式属性但在实际使用时我们会使用CSS来设置5、清除列表黑色小圆点CSS样式 li {list-style: none; }示例ul li列表项1/li li列表项2/li li列表项3/li /ulb、有序列表目的有序列表即为有排列顺序的列表其各个列表项会按照一定的顺序排列定义语法: 在HTML标签中ol标签用于定义有序列表列表排序以数字来显示并且使用li标签来定义列表项注意:1、ol/ol中只能嵌套li/li,直接在ol/ol标签中输入其他标签或文字的做法是不被允许的3、li/li之间相当于一个容器可以容纳所有元素4、有序列表会带有自己的样式属性但在实际使用时我们会使用CSS来设置示例:ol li列表项1/li li列表项2/li li列表项3/li /olc、自定义列表使用场景: 自定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号语法: 在HTML标签中dl标签用于定义描述列表(或定义列表)该标签会与dt(定义项目/名字)和dd(描述每一个项目/名字)一起使用特点:1、dl/dl里面只能包含dt和dd2、dt和dd个数没有限制经常是一个dt对应多个dd示例dl dt名词一/dt dd解释一/dd dd解释二/dd /dl12) 列表总结13) 表单标签目的: 使用表单是为了收集用户信息表单的组成: 在HTML中一个完整的表单通常由表单域、表单控件和提示信息三个部分组成a、表单域定义: 表单域是一个包含表单元素的区域解释: 在HTML标签中form标签用于定义表单域以实现用户信息的手机和传递form会把它范围内的表单元素信息提交给服务器常用属性属性 属性值 作用action url地址 用于指定接收并处理表单数据的服务器程序的url地址method get/post 用于设置表单数据的提交方式其取值为get/postname 名称 用于指定表单的名称以区分同一个页面中的多个表单域特点1、写表单元素之前应有表单域把它们进行包含2、表单域是form标签示例:form actionurl地址 method提交方式 name表单域名称 各种表单元素控件 /formb、表单控件(表单元素)目的: 在表单域中可以定义各种表单元素这些表单元素就是允许用户在表单中输入或者选择的内容控件分类:1、input输入表单元素定义: input是输入的意思在表单元素中input标签用于收集用户信息在input标签中包含一个type属性根据不同的type属性值输入字段拥有很多中形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮等等)特点:A、input / 为单标签B、type属性设置不同的属性值用来指定不同的控件类型(type为必须属性)​​​​​​​​​​​​​​示例:input typetext /2、select下拉表单元素使用场景: 在页面中如果有多个选项让用户选择并且想要节约页面空间时我们可以使用selectt标签控件定义下拉列表特点:A、select中至少包含一对optionB、在option中定义selectedselected时当前项即为默认选中项示例:select option选项一/option option选项二/option option选项三/option /select3、textarea文本域元素使用场景: 当用户输入内容较多的情况下可以使用textarea标签解释: 在表单元素中textarea标签是用于定义多行文本输入的控件。使用多行文本输入控件可以输入更多的文字该控件常见于留言板、评论。特点:A、通过textarea标签可以轻松地创建多行文本输入框B、cols每行中的字符数row显示的行数在实际的开发过程中都是使用CSS来改变大小示例textarea 文本内容 /textarea4、总结​​​​​​​14) label标签目的: label标签为input元素定义标注解释: label标签用于绑定一个表单元素当点击label标签内的文本时浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验核心label标签的for属性应当与相关元素的id属性相同示例label forsex男/label input typeradio namesex idsex /15) 其它标签1、hr /: 被水平线分隔的标题和段落