【Web学习笔记DAY03】HTML(2)

最新推荐文章于 2024-04-22 16:45:06 发布

桀.月

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量177

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45650243/article/details/104199153

版权

也就是文件路径。描述了网站文件夹结构中某个文件的位置。
路径可以分为：绝对定位和相对定位。
文件路径会在链接外部文件时被用到：

绝对路径
绝对文件路径是一个从盘符开始的完整路径或网址。
例：
“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 元素、复选框、单选按钮、提交按钮等等。

常用属性：

注意：每个表单都应该有自己表单域。

表单元素(表单控件)
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

< input > 元素
< input />是单标签，type属性是最基本的属性。属性值有很多种，用于指定不同类型的元素。
input标签的属性及属性值
具体的属性值使用也可以查看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>

常见的使用场景如下：
下拉菜单
OK，今天的笔记就到这里啦，今天的知识都是重点，日后很多的工作场景中都会用到。大家加油吧！

对啦，顺便一提，给大家推荐两个文档吧，里面有更加详细的讲解及使用方法。多多的查阅文档对我们来说是一个很好的习惯呦！
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/

关注