【Web学习笔记DAY03】HTML(2)
路径
也就是文件路径。描述了网站文件夹结构中某个文件的位置。
路径可以分为:绝对定位和相对定位。
文件路径会在链接外部文件时被用到:
- 网页
- 图像
- 样式表
- JavaScript
绝对路径
绝对文件路径是一个从盘符开始的完整路径或网址。
例:
“D:\web\img\logo.gif”或者"https://www.w3school.com.cn/images/picture.jpg"。
相对路径
相对路径指向了相对于当前页面的文件。以当前的网页为参考的路径,就是相对路径。
- 当引入的文件与当前页面在同一目录(文件夹)时,直接输入引入的文件名即可。
<img src="logo.jpg" alt="logo">
- 当引入的文件在当前页面的下级目录(文件夹)时,输入引入文件所在文件夹和引入文件名,中间以“/”隔开即可。
<img src="img/logo.jpg" alt="logo">
当引入文件在当前页面的上级目录(文件夹)时,在文件夹的前面输入“…/”,即可返回上一级。
<img src="../img/logo.jpg" alt="logo">
嗯,值的注意的是,对于初学者来说路径这里可以说算是一个难点也是一个重点哦。工作中会非常非常频繁地使用的。我是不会说我当时在这里绕了多久的。。。
列表标签
列表应该大家都知道,也就无需多说了。在HTML中有三种列表标签:无序列表,有序列表,定义列表。
无序列表
无序列表,顾名思义就是列表里的内容是没有先后顺序的,都是并列的。
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
注意:<ul></ul>中只能放<li></li>,<li></li>标签相当于一个容器,里面可以输入任何标签。
在浏览器运行的效果
有序列表
有序列表就是按照一定顺序排列的列表。
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
注意: <ol></ol>中只能放<li></li>,<li></li>标签相当于一个容器,里面可以输入任何标签。
在浏览器中运行的效果如下:
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。常用于对术语或名词进行解释和描述。
<dl>
<dt>名词</dt>
<dd>解释或描述性文字</dd>
<dt>牛奶</dt>
<dd>白色的饮品</dd>
</dl>
表单标签
表单标签的作用就是收集用户信息。一个完整的表单通常由表单元素、提示信息和表单域组成。
表单域
< form > 元素定义 HTML 表单。用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
<form action="url地址" method="提交方式" name="表单名称">
表单元素
</form>
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
常用属性:
- Action
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。 - method
用于设置表单数据的提交方式,其取值为get或post。 - name
用于指定表单的名称,以区分同一个页面中的多个表单。
注意: 每个表单都应该有自己表单域。
表单元素(表单控件)
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
< input > 元素
< input />是单标签,type属性是最基本的属性。属性值有很多种,用于指定不同类型的元素。
具体的属性值使用也可以查看W3C文档:https://www.w3school.com.cn/
label标签
label 标签为 input 元素定义标注(标签)。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
for 属性规定 label 与哪个表单元素绑定。
textarea文本域
用于定义多行输入字段。也就是说如果用户需要输入大量信息时,就需要用到< textarea >< /textarea >标签。
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
在浏览器运行效果如下:
select标签
select标签用于定义下拉菜单。
<select name="" id="">
<option value="">选项</option>
<option value="">选项</option>
</select>
- <select></select>中至少应包含一对<option></option>。
- < option> 元素定义待选择的选项。
- 列表通常会把首个选项显示为被选选项。
- 在option 中定义selected =" selected "时,当前项即为默认选中项。
常见的使用场景如下:
OK,今天的笔记就到这里啦,今天的知识都是重点,日后很多的工作场景中都会用到。大家加油吧!
对啦,顺便一提,给大家推荐两个文档吧,里面有更加详细的讲解及使用方法。多多的查阅文档对我们来说是一个很好的习惯呦!
W3C:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/