当前位置: 首页 > news >正文

重生之while在鸣潮学习HTML标签

                                       个人主页:终端

HTML标签


目录

2.1标题标签

2.2段落标签

2.3换行标签

2.4列表标签

2.5超链接标签

2.6图片标签

2.7表格标签

 2.8-2.9表单标签&表单项

2.10布局相关标签

 2.11特殊字符

2.1标题标签


标题标签

  •  代码
	<h1>鸣</h1> <h2>潮</h2><h3>启</h3><h4>动</h4><h5>!!!</h5><h6>!!!</h6>

2.2段落标签


段落标签

  • 段落     p
  • 代码
<p>This is mingchao </p>
<p>Yes!</p>

2.3换行标签


换行标签

  • 换行
    1.hr  分隔符
    2.br  换行
  • 代码
<br>
<hr>

2.4列表标签


有序列表

  • 列表标签ol
  • 列表项标签li
  • 代码
<ol><li>数据类型</li><li>变量</li><li>流程控制</li><li>函数</li><li>面向对象</li></ol>

有序列表

  • 列表标签ul
  • 列表项标签li
  • 代码
  <ul><li>JAVA<ol><li>数据类型</li><li>变量</li><li>流程控制</li><li>函数</li><li>面向对象</li></ol></li><li>C</li><li>C++</li><li>python</li><li>go</li></ul>

2.5超链接标签


超链接标签

  • href  用于定义要跳转的目标资源的地址
    1.完整的url while03-CSDN博客
    2.相对路径  以当前资源的所在路径为出发点去找目标资源
    3.绝对路径  无论当前资源在哪里,使用以固定的位置作为出发点去找目标资源以/开头
  • target 用于定义目标资源的打开方式
1.	_self  在当前窗口打开目标资源2.	_blank 开启新窗口打开目标资源
  • 代码
<body><!--超链接标签a href  用于定义要跳转的目标资源的地址1 完整的url https://blog.csdn.net/twlinl0613?spm=1010.2135.3001.53432 相对路径  以当前资源的所在路径为出发点去找目标资源3 绝对路径  无论当前资源在哪里,使用以固定的位置作为出发点去找目标资源以/开头target 用于定义目标资源的打开方式_self  在当前窗口打开目标资源_blank 开启新窗口打开目标资源--><!--完整的url--><a href="https://blog.csdn.net/twlinl0613?spm=1010.2135.3001.5343" target="_blank">while03的博客</a><!--相对路径写法--><a href="02标题段落换行.html"target="_blank">02标签</a><a href="a/test.html"target="_blank">test</a><!--绝对路径写法--><a href="/demo1-html/a/test.html"target="_blank">test</a>
</body>

2.6图片标签


图片标签:img(重点)图片标签,用于在页面上引入图片

  • 效果
图1
  • 代码
<body><!--imgsrc 定义图片的路径1.url2.相对路径3.绝对路径title 定义鼠标悬停时提示的文字alt  定义图片加载失败时提示文字--><img src="img/鸣潮.jpg"width="300px" title="鸣潮" alt="加载失败">
</body>

2.7表格标签


常规表格

  • table标签   代表表格
  • thead标签  代表表头 可以省略不写
  • tbody标签  代表表体 可以省略不写
  • tfoot标签   代表表尾  可以省略不写
  • tr标签       代表一行
  • td标签      代表行内的一格
  • th标签     自带加粗和居中效果的td
  • 效果
图2
  • 代码
<body><!--table 整张表格thead 表头tbody 表体tfoot 表尾tr 表格中的一行 td 行中的一个单元格th 自带加粗居中效果的tdstyle="text-align:center;" 文字居中rowspan 表格向下colspan 表格向右--><h3 style ="text-align: center;">员工技能竞赛评分</h3><table border ="1px" style="margin: 0px auto; width: 500px;"><thead><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr></thead><tbody><tr><td>1</td><td>小王</td><td>90</td><td rowspan="6">前三名升职加薪</td></tr><tr><td>2</td><td>老刘</td><td>90</td></tr><tr><td>3</td><td>小崔</td><td>90</td></tr><tr><td>总人数</td><td colspan="2">2000</td></tr><tr><td>平均分</td><td colspan="2">90</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr></tbody><tfoot></tfoot></table>
</body>

 2.8-2.9表单标签&表单项


表单标签:可以实现让用户在界面上输入各种信息并提交的一种标签,是向服务端发送数据主要的方式之一

  • from标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
    1.action:from标签的属性之一,用于定义信息提交的服务器地址
    2.method :from标签的属性之一,用于定义信息的提交方式
  • get

1.参数会以键值对形式放在url后提交            

2. 数据直接暴露在地址栏上,相对不安全
            3.地址栏长度有限制,所以提交的数据量不大
            4.地址栏上,只能是字符,不能提交文件
            5.相比post,效率高一些

  • post
               1.参数默认不放到url后
               2.数据不会直接暴露在地址栏上,相对安全
               3.数据是单独打包请求体发送,提交的数据量比较大
               4.请求体中,可以是字符,也可以是字节数据,可以提交文件
               5.相比于get效率略低一些

  • input标签 :主要的表单项标签,可以用于定义表单项
                         表单项标签一定要定义name属性,该属性用于明确提交时的参数名
                         表单项还需要定义value属性,该属性用于明确提交实参

  • name : input标签的属性之一,用于定义提交的参数名。
  • type : input标签的属性之一,用于定义表单项的类型。
               1. text   单行普通文本框
               2.password 密码框
               3.submit  提交按钮
               4.reset  重置按钮
               5.radio  单选框 :多个单选框使用相同的name属性值,则就会有互斥效果
               6.checkbox 多选框
               7. hidden  隐藏域  不显示在页面上,提交时会携带
               8.file   文件上传框

  • textarea     多行文本框(文本域)
  • select        下拉框
  • 效果
图3
  • 代码
<body><!--formaction 定义数据的提交地址1.url2.相对路径3.绝对路径method 定义数据的提交方式GET1.参数会以键值对形式放在url后提交2. 数据直接暴露在地址栏上,相对不安全3.地址栏长度有限制,所以提交的数据量不大4.地址栏上,只能是字符,不能提交文件5.相比post,效率高一些POST1.参数默认不放到url后2.数据不会直接暴露在地址栏上,相对安全3.数据是单独打包勇敢请求体发送,提交的数据量比较大4.请求体中,可以是字符,也可以是字节数据,可以提交文件5.相比于get效率略低一些表单项标签表单项标签一定要定义name属性,该属性用于明确提交时的参数名 表单项还需要定义value属性,该属性用于明确提交实参inputtype  输入信息的表单项类型text    单行普通文本框password 密码框submit  提交按钮reset  重置按钮    radio  单选框  多个单选框使用相同的name属性值,则就会有互斥效果       checkbox 多选框  多个选项选多个hidden   隐藏域  不显示在页面上,提交时会携带file     文件上传框textarea 多行文本框(文本域)select  下拉框option -->           <form action="08welcome.html" method="get"><!--添加表单标签  用户输入信息的标签--><!--希望用提交一些特定的信息,但是考虑安全问题,或者是用户操作问题,不希望该数据发生改变readonly 只读disabled 不可用不提交时 不携带-->    <input type="hidden"name="id"value="1"><input type="text"name="id"value="456" readonly> <br><input type="hidden"name="id"value="789" disabled><br>用户名:<input type="text" name="username"/><br>密码: <input type="password " name="usePas"/><br>性别:<input type="radio"name="grander" value="1"  checked>男<input type="radio"name="grander"  value="0">女爱好:<input type="checkbox" name="hobby" value="1">乒乓球<input type="checkbox" name="hobby" value="2">足球<input type="checkbox" name="hobby" value="3">羽毛球<input type="checkbox" name="hooby" value="4"> 篮球<br>个人简介:<textarea name ="in" style="width:300px; height:100px">我来自于</textarea>  <br>籍贯:<select name="p" ><option value="1">京</option><option value="2">浙</option><option value="3">冀</option><option value="0" selected>--请选择--</option></select><br>选择头像:<input type="file"><br><input type="submit"  value="登陆"/><input type="reset"   value="清空"/><br></form>
</body>

2.10布局相关标签


div标签 俗称"块",主要于划分页面结构,做页面布局

span标签 俗称"层"主要用于划分元素范围,配合CSS做页面元素样式的修饰

  •  代码
<body style="background-color: cadetblue;"><!--css 设置样式通过元素的style属性进行设置style="样式名:样式值;样式名:样式值;"........块元素:自己独占一行的元素  块元素的CSS样式的宽 高等等往往是生效div行内元素:不会自己独占一行的元素  行内的CSS样式的宽 高等等往往是不生效span--><div style="border:1px solid blue; width: 400px;height: 300px;margin:10px auto; background-color: cadetblue;"> 123 </div><br><div style="border:1px solid blue; width: 400px;height: 300px;margin:10px auto;background-color: beige;"> 依靠加纳乔、梅努的进球,曼联在战胜曼城之后赢得足总杯冠军,这是他们自<span style="font-size: 20px;color:blue;font-weight:bold;">2015-16赛季</span>以来首次赢得足总杯。 </div><br><span style="border: 1px solid brown; width: 500px; height: 300px;">555</span> </div><br><div style="border:1px solid blue; width: 400px;height: 300px;margin:10px auto ; background-color: bisque;"> 依靠加纳乔、梅努的进球,曼联在战胜曼城之后赢得足总杯冠军,这是他们自<span style="font-size: 20px;color: aquamarine;font-weight:bold;">2015-16赛季</span>以来首次赢得足总杯。 </div><br><span style="border: 1px solid brown; width: 500px; height: 300px;">555</span>
</body>
  • 效果
图4

 2.11特殊字符


对于有特殊含义的字符,需要通过转移字符来表示

 参考:w3school

HTML中有用的字符实体

注释:实体名称对大小写敏感

图5
  •  代码
<body><!--有特殊含义的符号叫做字符实体对于html代码来说,某些符号是有特殊含义的,如果想显示这些特殊符号,需要进行转移-->&lt;h1&gt;一级标题&lt;/h1&gt;&amp; 
</body>
  • 效果

 好啦前几天学校运动会拖欠了的稿子,今天补发了,继续坚持写稿,然后写完稿肝数据坞啦!!!

相关文章:

  • 【ai】pycharm设置软件仓库编译运行基于langchain的chatpdf
  • 疯狂“造人”!美国两党共推新法案,5年培养100万AI及量子人才
  • 推荐3款好用的AI智能写作工具
  • 【算法专题】双指针算法之 移动零
  • Qt for android 串口库使用
  • 国产32位MCU的发展与机遇
  • 【数组】Leetcode 57. 插入区间【中等】
  • 【计算机视觉(2)】
  • 【LeetCode算法】第83题:删除排序链表中的重复元素
  • 一文搞透常见的Python编码陷阱(上)(分析+案例)
  • 如何判断一个对象是否已经被回收?
  • C++ 常用UI库
  • 如何消除*** WARNING L16: UNCALLED SEGMENT, IGNORED FOR OVERLAY PROCESS。如何消除函数未使用的警告
  • HTTPS能否避免流量劫持?如何实现HTTPS
  • 正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-24.1,2 SPI驱动实验-SPI协议介绍
  • Angular2开发踩坑系列-生产环境编译
  • ES6 学习笔记(一)let,const和解构赋值
  • FineReport中如何实现自动滚屏效果
  • IDEA常用插件整理
  • javascript 总结(常用工具类的封装)
  • JavaScript-Array类型
  • Rancher-k8s加速安装文档
  • React as a UI Runtime(五、列表)
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • SwizzleMethod 黑魔法
  • 阿里云Kubernetes容器服务上体验Knative
  • 闭包,sync使用细节
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 给Prometheus造假数据的方法
  • 基于遗传算法的优化问题求解
  • 你不可错过的前端面试题(一)
  • 前端面试总结(at, md)
  • 深度学习在携程攻略社区的应用
  • 通过git安装npm私有模块
  • 网页视频流m3u8/ts视频下载
  • 详解NodeJs流之一
  • “十年磨一剑”--有赞的HBase平台实践和应用之路 ...
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • #HarmonyOS:基础语法
  • $nextTick的使用场景介绍
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (175)FPGA门控时钟技术
  • (4) PIVOT 和 UPIVOT 的使用
  • (poj1.2.1)1970(筛选法模拟)
  • (二)换源+apt-get基础配置+搜狗拼音
  • (离散数学)逻辑连接词
  • (论文阅读11/100)Fast R-CNN
  • (三)mysql_MYSQL(三)
  • (十三)Flask之特殊装饰器详解
  • (四) 虚拟摄像头vivi体验
  • (一)插入排序
  • (已解决)什么是vue导航守卫
  • (转)AS3正则:元子符,元序列,标志,数量表达符