搜索

查看: 3018|回复: 11

[CSS/HTML] 如何学习html的各种标签

[复制链接]
发表于 2023-5-4 16:50:28 | 显示全部楼层 |阅读模式
Editor 2023-5-4 16:50:28 3018 11 看全部
目录
  • head标签学习
  • body标签学习
  • 1.标题标签
  • 2.水平线标签
  • 3.段落标签
  • 4.换行符标签
  • 5.空格符标签
  • 6.权重标签
  • body列表标签
  • 1.无序列表
  • 2.有序列表
  • 3.自定义列表
  • 列表标签全部代码
  • 图片标签学习
  • 代码粘贴
  • 超链接标签学习
  • a标签
  • 表格标签的学习
  • 表格的合并
  • 代码粘贴
  • 表格标签练习(绘出求职简历表)
  • 内嵌标签的学习
  • 框架标签的学习
  • 1.删除body标签
  • form表单标签的学习
    head标签学习
    网页标题标签

    HTML学习

    编码格式标签



    网页搜索优化标签

    HTML学习
              
             
             

    网页指定跳转标签



    其他标签
    CSS或js引入的标签

    body标签学习
    body文本标签

    1.标题标签
    h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
    属性:

    align : center right left
    我是标题
    我是标题
    我是标题
    我是标题
    我是标题
    我是标题


    202104130856561.png

    202104130856561.png


    2.水平线标签
    hr:会在页面中显示一条水平线,默认居中显示
    属性:
    width="宽度”设置水平线的宽度size=“高度”设置水平线的高度color="颜色”设置水平线的颜色




    202104130856562.png

    202104130856562.png


    3.段落标签
    p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块级元素)
    特点:段间距比较大

    4.换行符标签
    br:告诉浏览器需要在此位置换行

    5.空格符标签
    &nbsp:告诉浏览器在此位置增加空格

    6.权重标签
    b:会将内容加黑显示i :会将内容斜体显示u:会将内容增加下划线del :增加中划线
    权重标签可以随意叠加

    注:
    1标签的属性是对标签的功能进一步的补充 ,可以由开发人员自由指定标签的属性值,来达到想要的显示效果。
    2像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小。


           东方网·演兵场4月6日报道
    多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

    东方网·演兵场4月6日报道:多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到

    今天适合学习d

    文本标签全部代码



    body标签学习
    我是标题
    我是标题
    我是标题
    我是标题
    我是标题
    我是标题

          
    东方网·演兵场4月6日报道
    多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到
    东方网·
    演兵场4月6日报道:多家央媒近日集中报道了入列一年多的首艘国产航母山东舰,
    披露了其社区化生活、官兵伙食和近防装备等诸多细节。演兵场注意到
    今天适合学习d


    body列表标签
    1.无序列表

    ul
    li :该标签中书写列表内容,一个1i标签代表列表中的一行数据
    特点:默认数据前有一个黑圆圈符号.

    2.有序列表

    ol
    li :该标签中书写列表内容,一个1i标签代表列表中的一行数据
    特点:
    会自动的给列表进行顺序编码,格式从小到大并且是连续的。
    属性:type:可以改变顺序编码的值,可以是1 a A I, ,默认使用阿拉伯数字进行顺序编码

    3.自定义列表

    dl
    dt :数据的标题
    dd:数据的具体内容,一个dd表示一 条数据、

    列表标签全部代码


    body标签(列表标签)

    列表的学习
    无序列表
  • 北京
  • 广州
  • 上海
  • 西安
    有序列表
  • xx
  • hh
  • ll
  • qq
    [/ol]
    java
    python
    go
    shell
    hh
    aa
    xx
    ll


    图片标签学习
    img src :
    图片路径
    本地资源路径:一般本地图片资源使用相对路径即可网络资源路径:图片资源的URL地址
    属性
    width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大;单位可以是px也可以是百分比height :设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大;单位可以是px也可以是百分比title:图片标题,鼠标放在图片上的时候会显示alt:图片加载失败后的提示语

    注意:图片是不会自动换行的(行内元素)


    代码粘贴

           
                   
                    图片标签学习
                   
           
           
                    图片标签学习
                   
                   

                   

                   

                   
                   

                   
           



    超链接标签学习
    a标签
    href :要跳转的网页资源路径
    本地资源:相对路径
    网络资源:网络资源(网页)的URL
    target :指明要跳转的网页资源的显示位置
    _self 在当前页中刷新显示_blank 在新的标签页中显示_top 在顶层页面中显示_parent 在父级页面中显示 锚点学习
    作用:在一张网页中进行资源跳转
    使用:
    先使用超链接标签在指定的网页位置增加锚点.格式为:使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:访问方式/a>
    代码粘贴

    #超链接

           
                   
                    超链接
           
           
                    超链接标签
                   
                    图片标签

                   
                   


                   
                    baidu
                    锚点学习
                    锚点学习
           


    #锚点学习

           
                   
                    锚点学习
           
           
                    第一章
                    第二章
                   
                   
                    第一章
                   
                   
                   
                            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
                   
                   
                            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
                   
                   
                            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
                   
                   
                            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
                   
                   
                    第二章
                   
                   
                            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
                   
                   
                            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
                   
                   
                            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或
                   
                    回到顶部
           


    表格标签的学习
    table :声明一个表格
    ​ tr:声明一行,设置行高及改行所有单元格的高度。​ th:声明一个单元格,表头格.默认居中加黑显示​ td:声明一个单元格,默认居左显示原始数据
    属性:
    border :给表格添加边框width:设置表格的宽度height:设置表格的高度cellpadding:设置内容居边框的距离cellspacing:设置边框的大小
    特点:默认根据数据的多少进行表格的大小显示


                                    科目
                                    分数
                                    姓名
                                    性别
                           
                           
                                    英语
                                    100
                                    张三水电费水电费
                                    男
                           
                           
                                    汉语
                                    10
                                    李四
                                    男
                           

    202104130856573.png

    202104130856573.png


    表格的合并
    步骤:
    1.首先确保表格是一个规整的表格
    2.根据要合并的单元格,找到其所在的源码位置
    3.合并
    行合并:在要合并的单元格中的第一个单元格 上使用属性rowspan= “要合并的单元格的个数” ,并删除其他单元格完成合并列合并:在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数” ,并删除其他单元格

    表格合并的学习
                   
                   


    202104130856574.png

    202104130856574.png


    代码粘贴


           
                   
                   
                    表格标签
           
           
                    表格标签的学习
                   
                   
                                    科目
                                    分数
                                    姓名
                                    性别
                           
                           
                                    英语
                                    100
                                    张三水电费水电费
                                    男
                           
                           
                                    汉语
                                    10
                                    李四
                                    男
                           
                   
                    表格合并的学习
                   
                   

           



    表格标签练习(绘出求职简历表)


           
                   
                    表格文件作业
           
           
                   
                                    基本信息
                                   
                                   
                           
                           
                                    姓名
                                   
                                    性别
                                   
                                   
                           
                           
                                    民族
                                   
                                    出生年月
                                   
                           
                           
                                    政治面貌
                                   
                                    健康状况
                                   
                           
                           
                                    籍贯
                                   
                                    学历
                                   
                           
                           
                                    电子信箱
                                   
                                    联系电话
                                   

                           
                           
                                    专业
                                   
                                   
                           
                           
                                    毕业院校
                                   

                           
                           
                                    求职意向
                                   
                           
           



    202104130856575.png

    202104130856575.png


    内嵌标签的学习
    iframe
    参数:
    ​ src:要显示的网页资源路径;可以是本地(相对路径)也可以是网络资源(URL )

    注:默认当前页面打开及加载src指向的资源

    ​ width:设置显示区域的宽度 height :设置显示区域的高度
    作用:在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的。


           
                   
                   
           
           
                    csdn
                    baidu
                   
                   
                   
           



    框架标签的学习
    1.删除body标签
    frameset
    参数
    rows :按照行进行切分页面
    cols :按照列进行切分页面
    子标签:
    frame :进行切分区域的占位,一个frame可以单独加载网页资源。src :资源路径(本地或者网络)name :区域名, 结合超链接使用


           
                   
                    框架标签学习
           
           
                   
                   
                           
                           
                   
                   
                   
           

    form表单标签的学习
    作用:收集并提交用户数据给指定服务器
    属性:
    action :收集的数据提交地址也就是URLmethod :收集的数据的提交方式get :适合小量数据 ,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全。post:适合大量数据,安全,隐式提交
    注:
    表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交。提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据form标签会收集其标签内部的数据form表单的数据提交需要依赖于submit提交按钮. from表单域标签学习
    作用:给用户提供可以进行数据书写或者选择的标签。
    使用:
    (1)文本框:
    text 收集少量的文本数据,用户可见password收集用户密码数据 name :数据提交的键,也会被js使用value:默认值
    (2)单选框:
    radio ​ name : name属性值相同的单选框只能选择一项数据​ value :要提交的数据​ checked:checked使用此属性的单选默认是选择状态
    (3)多选框
    checkbox name:一个多选组需要使用相同的name属性值value:要提交的数据checked:checked 使用此属性的多选框默认选择状态
    (4)单选下拉框
    select name :数据提交的键名,必须声明子标签option:一个option标签表示一个下拉选项value :要提交的数据
    (5)文本域
    textarea:声明一个可以书写大量文字的文本区域 name :数据提交的键名, js和CSS也会使用rows :声明文本域的行数cols :声明文本域的列数
    (6)普通按钮

    (7)隐藏标签
    隐藏标签


           
                   
                    form表单标签的学习
           
           
                    form表单标签的学习
                   
                   
                            Login:
                            Password:
                            sex:男
                            爱好:吃饭
                            睡觉
                            打豆豆
                           
                            籍贯:
                                    北京
                                    上海
                                    广州
                           
                           
                            文本域:
                           
                                   
                           
                           
                           
                           
                           
                            隐藏标签
                           
                           
                           
                   
           



    202104130856576.png

    202104130856576.png


    注册页面练习


           
                   
                    注册页面
           
           
                    注册页面
                   
                   
                           
    用户名
    密码
    邮箱
    手机号码
    性别
                                                    man
                                                    woman
                                           
    爱好
                                                    吃饭
                                                    睡觉
                                                    打豆豆
                                           
    籍贯
                                                   
                                                            北京
                                                            上海
                                                            广州
                                                   
                                           
    个人介绍
                                                   
                                                           
                                                   
                                           

                                                    是否同意本公司协议
                                           

                                                   
                                           

                           
                   
                   
                   
           



    202104130856577.png

    202104130856577.png


    到此这篇关于如何学习html的各种标签的文章就介绍到这了,更多相关学习html标签内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛
  • error.html

    19.36 KB, 下载次数: 0, 下载积分: 知鸟币 -2

    error.html

    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-28 20:19:39 | 显示全部楼层
    当当当当裤裆坦 2023-6-28 20:19:39 看全部
    感谢楼主的无私分享!要想知鸟论坛好 就靠你我他
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 08:27:18 | 显示全部楼层
    井底燕雀傥 2023-6-29 08:27:18 看全部
    楼主,大恩不言谢了!知鸟论坛是最棒的!
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 13:38:30 | 显示全部楼层
    dxf17 2023-6-29 13:38:30 看全部
    这个帖子不回对不起自己!我想我是一天也不能离开知鸟论坛
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 14:48:46 | 显示全部楼层
    计划你大爷计j 2023-6-29 14:48:46 看全部
    楼主,我太崇拜你了!我想我是一天也不能离开知鸟论坛
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 15:13:41 | 显示全部楼层
    ffycxyw2274436 2023-6-29 15:13:41 看全部
    我看不错噢 谢谢楼主!知鸟论坛越来越好!
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 16:41:09 | 显示全部楼层
    啤酒瓶空了缓 2023-6-29 16:41:09 看全部
    这个帖子不回对不起自己!我想我是一天也不能离开知鸟论坛
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 18:21:12 | 显示全部楼层
    十二音阶囤 2023-6-29 18:21:12 看全部
    楼主,我太崇拜你了!我想我是一天也不能离开知鸟论坛
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-29 20:14:22 | 显示全部楼层
    麻辣鸡翅 2023-6-29 20:14:22 看全部
    既然你诚信诚意的推荐了,那我就勉为其难的看看吧!知鸟论坛不走平凡路。
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    发表于 2023-6-30 04:49:42 | 显示全部楼层
    米老鼠和蓝精鼠v 2023-6-30 04:49:42 看全部
    论坛不能没有像楼主这样的人才啊!我会一直支持知鸟论坛
    知鸟论坛永久地址发布页:www.zn60.me
    回复

    使用道具 举报

    • 您可能感兴趣
    点击右侧快捷回复 【请勿灌水】
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则 返回列表

    RSS订阅| SiteMap| 小黑屋| 赞兔论坛
    联系邮箱E-mail:zniao@foxmail.com
    快速回复 返回顶部 返回列表