html记录

最新推荐文章于 2022-06-30 18:34:55 发布

weixin_34417200

最新推荐文章于 2022-06-30 18:34:55 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gleamer/p/10190025.html

本文深入解析HTML中的关键标签，包括a标签的使用、锚点定位、base标签、table标签的复杂运用、label和textarea标签的特性，以及select和form标签的详细说明。通过实例展示如何正确使用这些标签来构建网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a

链接标签
单词缩写： anchor 的缩写。基本解释锚, 铁锚的
href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。


<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sina.com.cn/">新浪</a>
<a href="新闻页面.html">今日新闻</a>
<a href="#">我的作品地址</a>

锚点定位

1.使用“a href=”#id名>“链接文本"创建链接文本。

2.使用相应的id名标注跳转目标的位置。
:target目标伪类选择器CSS3 :选择器可用于选取当前活动的目标元素

<style>
:target {
    color: red;
    font-size: 30px;
}
</style>

<a href="#movie">1 演艺经历</a><br />
<a href="#live">2 个人生活</a><br />

<h3 id="movie">演艺经历</h3>
<hr />

XXXX年，XXXX考进XXXX北京电影学院XXXXXXXXXXXX
<h3 id="live">个人生活</h3>
<hr />

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

base 标签

base 可以设置整体链接的打开状态，写在 <head> </head>之间

table

        <table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="right">
            <caption>火影忍者演员表</caption>
         <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>鸣人</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>佐助</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </tbody>
        </table>

跨行合并：rowspan 跨列合并：colspan
合并的顺序先上先左

        <tbody>
            <tr>
                <td>鸣人</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>佐助</td>
                <td colspan="2">男</td>
            </tr>
        </tbody>

label

<h3>label(table) 标签的使用 </h3>
<label>  输入账号: <input type="text" /> </label> <br />
<label for="two">  输入账号: <input type="text" />   <input type="text"  id="two"/></label>
        <hr />
        1. 用label 直接进行包裹input 就可以了
        2. 如果label里面有多个表单，想定位到某个  可以通过for  id 的格式来进行

textarea

文本域

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

  一般就这样写，
<textarea>
文本内容
</textarea>

select

下拉菜单

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>


      籍贯:
       <select>
            <option>点击选择您的籍贯</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option selected="selected">星星</option>
       </select>

form

表单域

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
用于设置表单数据的提交方式，其取值为get或post。
name
用于指定表单的名称，以区分同一个页面中的多个表单。

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

转载于:https://www.cnblogs.com/gleamer/p/10190025.html