2021-07-27

最新推荐文章于 2024-07-13 10:22:10 发布
最新推荐文章于 2024-07-13 10:22:10 发布
阅读量215 收藏
点赞数
分类专栏： html html基础 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46579547/article/details/119150985
版权

HTML基础2

一、锚点定位
作用：通过创建锚点链接，使用户能够快速定位到目标内容
创建步骤：
（1）在跳转目标的位置添加id名标注
（2）使用<a href = “#id名” 链接文本 /a>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>锚点跳转</title>
</head>
<body>
    <a href="#zao">1、早年经历 <br>
        <img src="../day01-07-26/duola.webp" alt="">
    </a> <br>
    <a href="#yan">2、演艺经历 <br>
        <img src="../day01-07-26/duola.webp" alt="">
    </a> <br>

    <a href="#ge">3、个人生活 <br>
        <img src="../day01-07-26/duola.webp" alt="">
    </a>

    <!-- 键值对   id键名  =  键值 -->
    <div id="zao"> <b>早年经历</b> </div>
    <p>赵丽颖出生于河北廊坊市一个普通家庭，祖辈都是农民，父亲原是派出所民警，母亲原是百货商店售货员。农村的生活经历，磨练出了她坚强的意志，也造就了其坚韧顽强的个性。从廊坊市电子信息工程学校空乘专业毕业后，由于家庭经济条件的限制，她放弃报考空姐的机会，而选择在一家公司做销售的工作。[10]。步入社会后，赵丽颖做了很多职业，不仅当过销售，还在餐厅当过服务员。[11]演艺经历</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="yan"><b>演艺经历</b></div>
    <p>2006年5月，在雅虎搜索网、浙江卫视、华谊兄弟联合主办的雅虎搜星比赛中凭借良好表现以及投票网友的支持，最终获得冯小刚组冠军，因而在冯小刚执导的广告片《跪族篇》中担任女主角[12]；同年，签约华谊兄弟公司，并与周迅合作拍摄玉兰油广告；11月，其加盟由张国立、蒋雯丽倾情主演的电视连续剧《金婚》，饰演蒋雯丽14至17岁的三女儿多多[13]；12月，与王刚、宁静、唐国强携手出演古装剧《南越王》，剧中饰演小皇后一角。2007年，参演电影处女作《镖行天下之牡丹阁》；1月，与郭晓冬、刘孜、归亚蕾共同出演爱情剧《世纪不了情》；同年，在民国爱情剧《春去春又回》中饰演温婉可人的任洁儿。[14]</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="ge"><b>个人生活</b></div>
    <p>2019年3月4日，赵丽颖成为和颂传媒全新合伙人。[103]5月23日，凭借电视剧《知否知否应是绿肥红瘦》获第25届上海电视节白玉兰奖最佳女主角奖提名。[104]12月28日，获得腾讯视频星光大赏年度最具商业价值艺人[105]。</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

二、base标签
base单标签，可以设置整体链接打开的状态，设置在head里

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接标签</title>
    <base href="" target="_blank">
    <!-- base标签若设置，则整体页面内的链接和跳转方式将固定 -->
</head>
<body>
    <a href="https://www.baidu.com/">百度一下，你就知道</a> <br>
    <a href="https://y.qq.com/?ADTAG=myqq#type=index" title="畅享QQ音乐">
    <img src="./duola.webp" alt="image" style="width: 100px; height: 100px;"></a> <br>
    <!-- <a href="https://y.qq.com/?ADTAG=myqq#type=index" target="blank">畅享QQ音乐</a> -->
</body>
</html>

三、列表标签
1、有序列表标签ol
有序列表即为排列有序的列表，各个列表按照一定的顺序排列。
ol定义有序列表，有type属性，取值有：a 、 A、1、I、i

示例代码1：

    <!-- 有序列表 -->
    <ol>
        <li>年龄</li>
        <li>性别</li>
        <li>民族</li>
        <li>住址</li>
    </ol>
    <!-- li为点 ，加ol为有序，ol定义有序列表 有type属性，取值为：a 、A -->

示例代码2：

    <ol type="1">
        <li>
            <a href="#">早年经历</a>
        </li>
        <li>
            <a href="#">演艺经历</a>
        </li>
        <li>
            <a href="#">个人生活</a>
            <ul>家庭生活</ul>
            <ul>感情经历</ul>
            <ul>投资理财</ul>
        </li>   
    </ol>

2、无序列表标签ul
无序列表的各个列表项之间没有顺序级别之分，是并列的。
无序列表ul有type属性，取值有：circle 空心圆 square 实心方块 disc 实心圆

示例代码：

    <!-- 无序列表ul 有type属性 ，取值有：circle 空心圆 square 实心方块 disc 实心圆-->
    <ul type="disc">
        <li>年龄</li>
        <li>性别</li>
        <li>民族</li>
        <li>住址</li>
        <!-- ul定义无序列表  ul>li-->
    </ul>

3、自定义列表
自定义列表常用于术语或名词的解释，定义列表的列表项没有任何项目符号。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <!-- 自定义列表 对名词进行解释说明 -->
    <!-- dl>dt>dd -->
    <!-- dd是对dt进行描述或解释的，一个dt可以使用多个dd -->
    <dl>
        <!-- dl定义自定义列表 -->
        <dt>关于我们</dt>
        <dd>公司介绍</dd>
        <dd>练习我们</dd>
    </dl>
    <dl>
        <!-- dl定义自定义列表 -->
        <dt>关于我们</dt>
        <dd>公司介绍</dd>
        <dd>练习我们</dd>
    </dl>
    <dl>
        <!-- dl定义自定义列表 -->
        <dt>关于我们</dt>
        <dd>公司介绍</dd>
        <dd>练习我们</dd>
    </dl>
</body>
</html>

Tip：dd是对dt进行描述或者解释的，一个dt可以拥有多个dd

四、表格标签
表格是较为常用的一种标签，不是用来布局，而是用来处理、显示表格式数据
Tip:
（1）table用于定义表格
（2）tr用于定义表格的一行，必须嵌套在table标签中，在table标签内有几对tr，就有几行表格。
（3）td用于定义表格中的单元格，必须嵌套在tr标签中，在tr标签内有几对td，就有几个单元格（列）
（4）tr中只能嵌套td
（5）table标签中可添加的属性：border:边框（border的值不能小于1，如果小于1则等同于0） cellspacing:单元格与单元格之间的间隙 cellpadding:单元格内容与单元格边框之间的间隔 bgcolor:背景颜色 background:背景图片
bordercolor:边框颜色 align:对齐方式 width:宽度 height:高度
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 表格定义：table   定义表格行：tr  定义单元格：td -->
    <!-- border：边框  cellspacing:单元格与单元格之间的间隙  cellpadding:单元格内容与单元格边框的间距  bgcolor：背景颜色 background:背景图片 bordercolor:边框颜色 align:对齐方式 center：居中 left:左 right:右 -->
    <table border="1px" cellspacing="0" cellpadding="10" align="center" width="500px" height="300px" background="../day01-07-26/duola.webp" >
        
        <tr>
            <td></td>
            <td>低端 <br>10元以下</td>
            <td>低端 <br>10-20</td>
            <td>低档 <br>20-30</td>
            <td>中档 <br>30-100</td>
        </tr>
        <tr>
            <td>市场规模</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>代表品牌</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>主流品牌</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>市场度数</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

效果如下：
在这里插入图片描述
五、表格结构
1、表格标题 caption
表格的标题用caption标签来定义，必须定义在table标签之后，并且每个表格只能定义一个标题，标题会居中于表格之上。
2、表格头部thead
3、表格主体tbody
4、表格页脚tfoot

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
</head>
<body>
    <table border="1px" cellspacing="0px" cellpadding="10px" width="500px" height="200px" align="center" background="../day01-07-26/duola.webp">
        <caption>小说排行榜</caption>
        <thead>
            <tr>
                <td> <b> 排行</b></td>
                <td> <b>关键词</b></td>
                <td> <b>趋势</b></td>
                <td> <b>今日搜索</b></td>
                <td> <b>最近七日</b></td>
                <td> <b>相关链接</b></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="./down.png" alt="" style="width: 20px; height: 20px;"> </td>
                <td align="center">233</td>
                <td align="center">233</td>
                <td> 
                    <a href="https://baike.baidu.com/search/none?word=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7&pn=0&rn=10&enc=utf8">贴吧</a>
                    <a href="https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf40ad13ff35f9b402c11dfa9ec61da?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg">图片</a>
                    <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td> <img src="./down.png" alt="" style="width: 20px; height: 20px;"></td>
                <td align="center">233</td>
                <td align="center">233</td>
                <td>
                    <a href="https://baike.sogou.com/v156838.htm?fromTitle=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0">贴吧</a>
                    <a href="https://imgranwena.cdn.bcebos.com/files/article/image/3/3164/3164s.jpg">图片</a>
                    <a href="https://baike.sogou.com/v156838.htm?fromTitle=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0">百科</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="./down.png" alt="" style="width: 20px; height: 20px;"></td>
                <td align="center">233</td>
                <td align="center">233</td>
                <td>
                    <a href="https://baike.baidu.com/search/none?word=%E8%A5%BF%E6%B8%B8%E8%AE%B0%E8%B4%B4%E5%90%A7&pn=0&rn=10&enc=utf8">贴吧</a>
                    <a href="https://bkimg.cdn.bcebos.com/pic/b7fd5266d01609248d763e43db0735fae6cd3412?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg">图片</a>
                    <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fr=aladdin">百科</a>
                </td>
            </tr> 
        </tbody>

    </table>
</body>
</html>

六、合并单元格
（1）跨行合并：rowspan rowspan =“合并单元格个数”
（2）跨列合并：colspan colspan =“合并单元格个数”

七、表单标签
表单：目的是为了收集用户信息
HTML中，一个完整的表单由：表单控件（表单元素）、提示信息、表单域
1、input控件
input标签是单标签，type属性是其最基本的属性，除此之外还有name、value、size、checked、maxlength
2、文本域
通过input type =“text” 来设定
3、密码字段
通过input type =“password” 来设定
4、单选按钮
通过input type =“radio” 来设定,通过同一个name值定义同一组
5、复选框
通过input type =“checkbox” 来设定
6、普通按钮
通过input type =“button” 来设定
6、提交按钮
通过input type =“submit” 来设定
7、重置按钮
通过input type =“reset” 来设定
8、图片按钮
通过input type =“imge” 来设定
10、文件域（上传文件）
通过input type =“file” 来设定
11、聚焦输入框 label
用于绑定一个表单标签，当点击label标签时，被绑定的表单元素就会自动获得输入焦点
12、textarea控件文本域
可创建多行文本输入框

        <tr>
            <td>自我介绍</td>
            <td>
                <textarea name="introduce" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>

13、下拉菜单
使用select控件定义下拉菜单

                <select name="years" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">1997年</option>
                    <option value="">1998年</option>
                    <option value="">1999年</option>
                    <option value="">2000年</option>
                    <option value="">2001年</option>
                </select>

14、表单域
form标签定义表单域，用于实现用户信息的收集与传递

m0_46579547
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PyTorch 最新安装教程（2021-07-27）
风口IT猪的成长录
07-27 22万+
PyTorch 最新安装教程（2021-07-27）前言1. 安装 Anaconda2. 检查显卡，更新驱动3. 创建PyTorch环境4. 配置清华TUNA镜像源5. 安装 PyTorch6. 测试 前言 万事开头难！ 这句话又一次被我验证。 记得前不久刚陷入Tensorflow2.0的安装困境，这一次又被PyTorch 搞哭辽。 孩子太难了o(╥﹏╥)o，不过还好最终成功安装，感谢全网资源，感谢大佬们的博客！被我一次一次试了出来。 1. 安装 Anaconda Anaconda 是一个用于科学计算的 P
capital_shell_ios 2021-07-27 19-44-42.zip
07-27
"Capital Shell iOS 2021-07-27 19-44-42.zip" 这个文件名暗示我们可能在处理一个针对iOS设备的应用程序或框架，名为"Capital Shell"的更新或者版本，日期表示该资源创建于2021年7月27日的19时44分42秒。由于没有...
前端基础input输入框主要属性
热门推荐
m0_58849641的博客
09-17 1万+
　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。 　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。 　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。 　　4、复
＜HTML＞标签
qq_51492065的博客
06-08 5026
<li>标签定义和用法： <li> 标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 <ul>标签和<ol>标签的区别 ul是无序列表，全称是unordered list，先来个例子： ●张三 ●李四 ●王二 ●刘五 再来一个例子 ol是有序列表 ,全称是ordered list，同样举个例子： 1、张三 2、李四 ...
无序列表 有序列表
weixin_72303943的博客
06-28 812
无序列表 有序列表
有序列表and无序列表and自定义列表~
东北玛丽的CSDN
01-28 448
无序列表 ul ：（重点） 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下： &lt;ul&gt; &lt;li&gt;列表1&lt;/li&gt; &lt;li&gt;列表2&lt;/li&gt; &lt;li&gt;列表3&lt;/li&gt; ...... &lt;/ul&gt; 注意： ul中只能嵌套li.直接在ul标签中输入其他标
38-有序列表
weixin_45683698的博客
11-21 2886
2.2有序列表（理解） 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序来排列定义。 在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。 有序列表的基本语法格式如下： <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol> 示例： <!DOCTY
2021-07-18 Debug
Choulongx的博客
07-18 438
今天发现了一个低级错误 [Error] ld returned 1 exit status 回去查发现是写错了主函数名称 我是sb
计算机视觉论文-2021-07-27
中科院AI算法工程师的博客
08-02 2759
本专栏是计算机视觉方向论文收集积累，时间：2021年7月27日，来源：paper digest 欢迎关注原创公众号【计算机视觉联盟】，回复【西瓜书手推笔记】可获取我的机器学习纯手推笔记！ 直达笔记地址：机器学习手推笔记（GitHub地址） 1, TITLE:3D AGSE-VNet: An Automatic Brain Tumor MRI Data Segmentation Framework AUTHORS: XI GUAN et. al. CATEGORY: cs.AI [cs....
2021-07-27修改用户所属组
07-29 3553
1.DAG(Directed Acyclic Graph叫做有向无环图，是一种非常重要的图论数据结构 2.This project does not have a wiki homepage yet 没有权限导致的。 3.mysql -uroot -p123456 -Dtest < /opt/data/test.sql 包安全错 可以通过声明密码的方式: export MYSQL_PWD=123456 mysql -uroot -Dtest < /opt/data/test.sql 4.系统可
数据中台建设方案[2021-07-27]（53页）.pdf
05-23
数据中台建设方案[2021-07-27]（53页）.pdf
2021年中国SaaS市场研究报告[2021-07-27]（105页）.pdf
05-18
2021年中国SaaS市场研究报告[2021-07-27]（105页）.pdf
BIM大数据智慧园区建设方案[2021-07-27]（50页）.pdf
05-20
BIM大数据智慧园区建设方案[2021-07-27]（50页）.pdf
minio version RELEASE.2022-02-01T18-00-14Z （amd x64）
02-13
minio version RELEASE.2022-02-01T18-00-14Z minio version RELEASE.2022-02-01T18-00-14Z minio version RELEASE.2022-02-01T18-00-14Z minio version RELEASE.2022-02-01T18-00-14Z minio version RELEASE.2022-...
WEB前端02-HTML5基础(02)
最新发布
XYX_888的博客
07-13 742
在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 td标签 frame属性：表格的边框属性 合并单元格 单元格距 其他 8.表单标签 表单标签 表单属性 表单项标签 不同类型的input元素、下拉列表、文本域等。 input标签通过type属性控制输入形式。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlengthHTML5新type控件类型< select>: 定义下拉
探索HTML5的设计原则：引领Web开发的未来方向
s8305057的博客
07-09 540
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。
安全技术交底记录.docx
07-13
安全技术交底记录.docx
质量隐患整改通知单.docx
07-13
质量隐患整改通知单.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值