2.HTML 高级(前端)

最新推荐文章于 2024-07-04 15:38:12 发布

faramita_of_mine

最新推荐文章于 2024-07-04 15:38:12 发布

阅读量267

点赞数 1

分类专栏： HTML 文章标签：前端 html5 html高级

本文链接：https://blog.csdn.net/faramita_of_mine/article/details/121297865

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML高级

一、超链接 a
二、select 元素
三、textarea 元素
四、最新 form 元素（了解）
五、最新 input 类型
六、表格元素

一、超链接 a

超链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接实现的。

绝对路径：绝对路径是指文件的完整路径，包括文件传输的协议( http、ftp) 等，一般用于网站的外部链接，例如：http://news.sina.com.cn/。
相对路径：相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之外，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。

注意：…/表示当前目录的上层目录。./表示当前目录（可省略）
< a >元素定义超链接，用于从一张页面链接到另一张页面。在所有浏览器中，链接默认外观通常是：未被访问的链接带有下划线而且是蓝色的、已被访问的链接带有下划线而且是紫色的、活动链接带有下划线而且是红色的。

在使用< a >元素时需要注意:

如果不使用 href 属性，则不可以使用如下属性：download、 hrefang、media、rel、target 以及 type 属性。
被链接页面通常显示在当前浏览器窗口中，除非规定了另一个目标( target 属性)。
请使用 Css 来设置链接的样式

超链接一般有如下可选属性

download        filename        规定被下载的超链接目标
href            URL             规定链接指向的页面的URL
hreflang        language_code   规定被链接文档的语言
media           media_query     规定被链接文档是为何种媒体/设备优化的
rel             text            规定当前文档与被链接文档之间的关系
target          _blank、_parent、_self、_top、framename 规定在何处打开链接文档

_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self 这个目标的值对所有没有指定目标的 < a > 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 < base > 标签中的 target 属性一起使用。

_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

案例：

<body>
<img src="../img/t01d1ef65ab892fcad0.jpg">
<a href="../hello.html" target="_self">覆盖当前页面</a>
<a href="../hello.html" target="_blank">打开新页面</a>
</body>

二、select 元素

< select >元素用于创建列表框或下拉菜单，该元素必须和< option >元素结合使用，每个< option >元素代表一个列表项或菜单项。

与其他表单控件不同的是，< select > 元素本身并不能指定 value 属性，列表框或下拉菜单控件对应的参数值由< option >元素来生成，当用户选中了多个列表项或菜单项后，这些列表项或菜单项的 value 值将作为该< selcct >元素所对应的请求参数值。

< select >元素可以指定 id、style、class 等核心属性，该元素仅可以指定 onchange 事件属性，当该列表框或下拉列表项内的选中选项发生改变时，触发 onchange 事件。除此之外，< select > 元素还可以指定如下几个属性。

disabled：设置禁用该列表框和下拉菜单，该属性的值只能是 disabled 或省略。

muliple：设置该列表框和下拉菜单是否允许多选，该属性的值只能是 multiple，即表示允许多选。一旦设置允许多选，< select > 元素就会自动生成列表框。

size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，< select > 元素就会自动生成列表框。

在< select >元素里，只能包含如下两种子元素：

1.< option >元素：用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的人文本。该元素除了 id、style、class 等核心属性和 onclick 等事件响应属性外，还有 disabled（禁用）、selected（初始时选择）、value（选项的值）

2.< optgroup > 元素：用于定义列表项或菜单项组。该元素里只能包含< option >元素，所有处于< optgroup >里的< option >元素均属于该组，该组件有一个必填属性 label（标签）。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>select 元素</title>
</head>
<body>
<select multiple>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>
<select disabled>
    <option>A</option>
    <option>B</option>
</select><br>
<select>
    <optgroup label="软件开发">
        <option value="1">开发1部</option>
        <option value="2">开发2部</option>
    </optgroup>
    <optgroup label="设计">
        <option value="3">设计1部</option>
        <option value="4">设计2部</option>
    </optgroup>
</select>
</body>
</html>

三、textarea 元素

< textarea > 元素用于生成多行文本域，可以指定 id、style、class 等核心属性，同时还可以指定 onclick 等事件响应属性。另外，由于 textarea 的特殊性，它可以接收用户输入内容，也可以选中文本域内的文本，所以还可以指定 onselect、onchange 两个属性，分别用于响应文本域内文本被选中、文本被修改事件。除此之外，该元素也可以指定如下几个属性：
①cols：指定文本域的宽度，一般为英文字母的个数 + 2。
②rows：指定文本域的高度，一般表示不出现滚动条时的行数。
③disabled：指定禁用该文本域。
④readonly：指定该文本域只读。
与单行文本框相同的是，< textarea > 元素也应指定 name 属性，该属性将作为 textarea 对应请求参数的参数名；与单行文本框不同的是，< textarea > 元素不能指定 value 属性，< textarea > 和< /textarea>标签之间的内容将作为< textarea>对应请求参数的参数值。
案例：

<body>
<textarea cols="80" rows="3" name="remark">
    张三
</textarea>
</body>

四、最新 form 元素（了解）

HTML5 中新增了几个 form 元素，分别是 datalist 和 output。

1.datalist 元素用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。该列表由 datalist 中的 option 元素创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。在实际应用中，如果要把 datalist 提供的列表绑定到某一输入框，则使用输入框的 list 属性来引用 datalist 元素的 id 就可以了。

<body>
<form>
<datalist id="TelephoneInfo">
    <option value="13526688704" label="Mobile Phone"></option>
    <option value="0371-65962530" label="Office Phone"></option>
    <option value="0371-63068118" label="House Phone"></option>
</datalist>
<p>请选择联系方式：<input type="tel" name="Telephone" id="Telephone" list="TelephoneInfo">
<p>
<input type="submit" value="确定">
</form>
</body>

2.output 元素定义不同类型的输出，比如计算结果或者脚本的输出。output 元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加 form 属性。

<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>

五、最新 input 类型

在 HTML5 中，增加了多个新的表单 input 输入类型，通过使用这些新增加的元素，可以实现更好的输入控制和验证。但是目前浏览器对其支持不是很好，有些必须在手机浏览器上才能看到区别。
①email 类型的 input 元素是专门用于输入 E-mail 地址的文本输入框，在提交表单的时候，会自动验证 email 输入框的值。如果不是一个有效的 E-mail 地址，则该输入框不允许提交表单。在以前的 Web 表单中，采用的是这种纯文本输入框来输入 E-mail 地址，不能自动进行表单数据验证，需要借助 JavaScript 脚本来进行数据验证。
②url 类型的 input 元素提供用于输入 url 地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是 url 地址格式的文本，则会提交数据到服务器:如果不是url地址格式的文本，则给出提示信息，并不允许提交数据。
③number 类型的 input 元素提供用于输入纯数值的文本框。可以设定对所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等，如果所输入的数字不在限定范围之内，则会出现错误提示。支持属性 max（允许的最大值）、min（允许的最小值）、step（步长）、value（默认值）
④range 类型的 input 元素提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。可以设定对数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。支持属性 max（允许的最大值）、min（允许的最小值）、step（步长）、value（默认值）
⑤日期类型的 input 元素 type 支持 date（日月年）、month（月年）、week（周年）、time（小时分钟）、datetime（时间加日月年0时区时间）、datetime-local（时间加日月年本地时间）
⑥color 类型的 input 元素提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开拾色器面板，方便用户可视化选择一种颜色。
注意：range 类型与 number 类型的属性是完全相同的，这两种类型的不同在于外观表现上，支持 range 类型的浏览器都会将其显示为滑块的形式，而不支持 range 类型的浏览器则会将其显示为普通的纯文本输入框，即以 type=“text” 来处理。所以无论怎样 range 类型的 input 元素都可以放心使用。

案例：

<form>
    <input type="email" name="email">
    <br>
    <input type="url" name="url">
    <br>
    <input type="range" name="range" max="50" min="20">
    <br>
    <input type="date" name="date">
    <br>
    <input type="month" name="month">
    <br>
    <input type="datetime-local" name="datetime">
    <br>
    <input type="color" name="color">
    <br>
    <input type="submit" value="提交">
</form>

六、表格元素

表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
table 一般有如下的自定义参数:

align    	left/center/right                不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	        #xxxxxx/colorname                不赞成使用。请使用样式代替。规定表格的背景颜色。
border	        pixels	                         规定表格边框的宽度。
cellpadding	pixels/%                         规定单元边沿与其内容之间的空白。
cellspacing	pixels/%                         规定单元格之间的空白。
width	        pixels/%                         规定表格的宽度。

案例：

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用 < table border=“1”> 显示边框。

表头：表格的表头使用 < th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

注意：在 td 上使用 colspan 规定单元格可横跨的列数，rowspan 设置单元格可横跨的行数。
章节练习：（默写 30 分钟）

1.按照设计图完成下面表格排版。
在这里插入图片描述
第一题参考代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="800" height="300" cellspacing="0" align="center">
    <caption>
        <h1>书籍排行榜</h1>
    </caption>
    <tr bgcolor="gray">
        <th>排名</th>
        <th>关键词</th>
        <th>点击量</th>
        <th>欢迎指数</th>
        <th>最近七日</th>
        <th>照片</th>
        <th>相关链接</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三国演义</td>
        <td>12345427</td>
        <td>☆★★★★</td>
        <td>2321</td>
        <td><img src="https://ps.ssl.qhimg.com/sdmt/113_132_100/t0164f5c8bd69b884c6.webp"></td>
        <td>
            <a href="##">贴吧</a>
            <a href="##">图片</a>
            <a href="##">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>2</td>
        <td>水浒传</td>
        <td>12345426</td>
        <td>☆☆★★★</td>
        <td>2321</td>
        <td><img src="https://ps.ssl.qhimg.com/sdmt/115_132_100/t0125b521baa1ba0d16.png"></td>
        <td>
            <a href="##">贴吧</a>
            <a href="##">图片</a>
            <a href="##">百科</a>
        </td>
    </tr>
</table>
</body>
</html>

第二题参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="800" height="300" cellspacing="0" align="center">

    <tr align="center">
        <td colspan="2">品牌</td>
        <td colspan="3">春装</td>
        <td colspan="3">夏装</td>
    </tr>
    <tr align="center">
        <td colspan="2"></td>
        <td>男装</td>
        <td>女装</td>
        <td>童装</td>
        <td>男装</td>
        <td>女装</td>
        <td>童装</td>
    </tr>
    <tr align="center">
        <td rowspan="2">    </td>
        <td>牛仔系列</td>
        <td>116</td>
        <td>98</td>
        <td>68</td>
        <td>88</td>
        <td>86</td>
        <td>46</td>
    </tr>
    <tr align="center">
        <td>牛仔系列</td>
        <td>116</td>
        <td>98</td>
        <td>68</td>
        <td>88</td>
        <td>86</td>
        <td>46</td>
    </tr>
</table>
</body>
</html>

faramita_of_mine

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
2.HTML 高级(前端)

HTML高级一、超链接 a二、select 元素三、textarea 元素四、最新 form 元素（了解）五、最新 input 类型六、表格元素一、超链接 a 超链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接实现的。绝对路径：绝对路径是指文件的完整路径，包括文件传输的协议( http、ftp) 等，一般用于网站的外部链接，例如：http://news.sina.com.cn/。相对路径：相对路径是指相对于当前文件的路径
复制链接

扫一扫