day1HTML常用标签

HTML常用标签

------------------head中的标签

------------------文字相关标签和相关符号

------------------图片和超链接

------------------列表标签

------------------input标签

------------------form标签

一、head中的标签

<!-- head中能使用的标签：meta标签（网页配置）、title 标签（设置网页标题）、link（导入外部文件）、style(设置内部格式)、script(添加内部js代码) --><!-- 标签语法<标签名 属性名1="属性值1" 属性名2="属性值2">标签内容</标签名><标签名 属性名1="属性值1" 属性名2="属性值2"> 或者 <标签名 属性名1="属性值1" 属性名2="属性值2"/>-->
<!DOCTYPE html>
<html><head><!-- 设置网页文本编码方式：设置成utf-8,中文不会乱码 --><!-- meta charset='utf-8'--><meta charset="utf-8"><!-- 设置网页标题 --><title>百度一下，你就知道</title><!-- 设置网页图表link标签的使用1）设置网页图标 rel属性   -  iconhref属性  -  图片地址2）导入外部样式rel属性  -  stylesheethref属性  -  css文件地址--><link rel="icon" href="img/c.jpg"></head><body>你好，世界！</body>
</html>

二、文字相关标签和相关符号

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 1.标题标签：h1~h6 --><h1>1.标题标签</h1><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><h1>个性化服务加速冰雪经济发展 培育扩大内需新引擎</h1><!-- 2.段落标签：p 需要在网页上显示一段文字就使用一个段落标签，默认情况段落会独立占一行--><h1>2.段落标签</h1><p>央视网消息：“3亿人上冰雪”的号召带动了冰雪运动的发展，也为冰雪产业提供了新的动能。在《户外运动产业发展规划（2022—2025年）》中，提出对户外运动装备器材运输便利化，同时研究探索在部分户外运动目的地为骑行、滑雪爱好者试点提供便利化运载服务。</p><p>此外，记者在深圳，浙江，四川等地滑雪场了解到，今年滑雪客群明显呈现出年轻化、亲子化的特点。雪场也相应地推出了宝宝少年营、滑雪进阶课程等等。而另外一项冰上运动——滑冰，也在“冬奥”这股东风的吹动下，有了更多人的加入。</p><!-- 3.行内文字标签：span多段文字内容在一行显示--><h1>3.行内文字标签</h1><h1>1）普通行内文字标签</h1><span>2022-11-27 11:53</span><span>环球网官方帐号</span><!-- 2)具有特殊功能的行内文字标签：b、strong、i、emb - 文字加粗strong -  文字加粗i - 文字倾斜em -  文字倾斜--><h1>3）加粗和倾斜文字</h1><p><b>央视网消息：</b>“3亿人上冰雪”的号召带动了冰雪运动的发展，也为<i>冰雪产业</i>提供了新的动能。在<strong><em>《户外运动产业发展规划（2022—2025年）》</em></strong>中，提出对户外运动装备器材运输便利化，同时研究探索在部分户外运动目的地为骑行、滑雪爱好者试点提供便利化运载服务。</p><!-- 4.换行和空格在html代码中按换行和空格在网页中是无效的，如果在网页中需要换行和空格的效果需要使用特定的标签和符号换行<br>水平线<hr>空格：&emsp;(空一个空格)、&nbsp;(空一个像素)--><h1>4.换行和空格</h1><p>hello<br><br>world</p><br><p>你好 世界</p><p>&emsp;&emsp;窗前明月光，<br><br>&nbsp;&nbsp;疑是地上霜。<br><br>举头望明月，<br><br>低头思故乡。</p> </body>
</html>

三、图片和超链接

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1 id="p4">目录</h1><a href="#p1">图片</a><a href="#p2">超链接</a><a href="#p3">一人之下</a><hr><h1 id="p1">第一章：图片</h1><!-- 1.图片：img src属性：提供图片地址（既可以是本地图片地址，也可以是网页图片地址）alt属性：图片加载失败的时候显示的提示信息title属性：图片标题（鼠标悬停在图片上的时候才会显示）--><h1>1.图片标签</h1><!-- 1）img标签显示本地图片 --><img src="img/a.jpg"><br><!-- 2）img标签显示网页图片 --><img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"><br><!-- 3）加载失败提示信息 --><img src="https://pics6.baidu.com/feed/962bd40735fae6cdcd1eaf13a5045d2f43a70f58.jpeg@f_auto?token=ac0dbf27864729144d18037cc46a0220" alt="图片加载失败"><br><!-- 4）图片标题 --><img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" title="狗狗"><br><hr><h1 id="p2">第二章：超链接</h1><!-- 2.超链接：a1)标签内容：决定可见可点击的部分2）href属性：决定目标地址a.网页地址  -  点击打开指定的网页b.本地的html文件地址 - 点击打开自己写的网页c.id选择器   -   页面内定位，在希望被调转的位置定义id值:id="p1",然后在跳转位置输入:#p1d.空串   -  重新加载页面3)target属性：设置跳转方式（_blank - 在新的窗口中打开新的页面  _self - 默认值,在当前窗口打开新页面）--><!-- 文字超链接 --><a href="https://image.baidu.com/search/albumsdetail?tn=albumsdetail&word=%E5%AE%A0%E7%89%A9%E5%9B%BE%E7%89%87&fr=albumslist&album_tab=%E5%8A%A8%E7%89%A9&album_id=688&rn=30">图片</a><!-- 图片超链接 --><a href="https://www.baidu.com/?tn=02003390_42_hao_pg" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"  alt=""></a><br><a href="https://www.baidu.com/s?wd=2022%E5%8D%A1%E5%A1%94%E5%B0%94%E4%B8%96%E7%95%8C%E6%9D%AF&rsv_dl=Worldcup_PC_2022_index_tips&tn=02003390_82_hao_pg"><img src="https://img2.baidu.com/it/u=566140257,3115593232&fm=253&fmt=auto&app=120&f=PNG?w=144&h=144" alt=""> <span>直击赛事现场</span></a><br><!-- 本地页面跳转 --><a href="02文字相关标签和相关符号.html"target="_blank">第一章 文字相关标签</a><br><a href="01head中的标签.html"target="_blank">第二章 head中的标签</a><br><hr><h1 id="p3">第三章：一人之下</h1><img src="https://t7.baidu.com/it/u=4036010509,3445021118&fm=193&f=GIF"><br><a href="#p4">回到顶部</a><a href="">刷新</a></body>
</html>

四、列表标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h2>第一次月考考试成绩排名：</h2><!------------- 1.有序列表:ol、li----------------><!-- ol标签  -  整个列表对应的容器li标签  -  列表中每个元素对应的标签--><ol><li>小明</li><li>张三</li><li>李四</li><li>王五</li></ol><hr><h2>已经拿到驾照的学生：</h2><!-------------- 2.无序列表ul、li ---------------><!-- ul标签 - 整个列表对应的容器li标签  -  列表中每个元素对应的标签--><ul><li>小红</li><li>李华</li><li>小花</li></ul><hr><h2>千锋成都校区所有的学科</h2><ul><li><p><b>Python数据分析</b></p><img src="https://img2.baidu.com/it/u=3095278001,78186962&fm=253&fmt=auto&app=138&f=JPEG?w=977&h=500" alt=""><p>“数据分析是指用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总和理解并消化，以求最大化地开发数据的功能，发挥数据的作用。 数据分析是为了提取有用信息和形成结论而对数据加以详                       细研究和概括总结的过程。 数据分析的数学基础在20世纪早期就已确立，但直到计算机的出现才使得实际操作成为可能，并使得数据分析得以推广。</p><p><h3>分为四个阶段学习内容</h3></p><ol><li>Python</li><li>SQL</li><li>爬虫</li></ol></li><hr><li><p><b>JAVA后端开发</b></p><img src="https://img1.baidu.com/it/u=1133092010,4009251506&fm=253&fmt=auto&app=138&f=JPEG?w=603&h=400" alt=""><p>Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。</p></li><hr><li><p><b>人工智能</b></p><img src="https://img2.baidu.com/it/u=2926734456,39294740&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=378" alt=""><p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。</p></li></ul><hr> </body>
</html>

五、input标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- input标签会因为type值十五不同，表现出完全不同的功能 --><!-- 1.text(默认):普通文本输入框 1)value属性:输入框2)placeholder属性：输入提示信息3）maxlength属性：限制输入的最大长度4)name属性：定义输入数据的意义（主要用于数据提交）--><h2>输入账号密码</h2><label for="i1">账号：</label><input type="text" value="张三" placeholder="请输入账号" maxlength="10" name="username" id="i1"><!-- <br><br><input type="text" value="" placeholder="请输入电话号码" maxlength="10" name="tel"> --><br><br><!-- 2.password:密码输入框1)value属性:输入框2)placeholder属性：输入提示信息3）maxlength属性：限制输入的最大长度4)name属性：定义输入数据的意义（主要用于数据提交）--><label for="i2">密码：</label><input type="password" value="" placeholder="请输入密码" maxlength="8" name="password" id="i2"><br><br><!-- 3.单选按钮radio、复选按钮checkbox 1)name属性：同一组选项的name属性值必须一致2)checked属性：添加checked可以让按钮处于选中状态--><h2>选择性别</h2><input type="radio" name="gender" id="g1" checked><label for="g1">男</label><input type="radio" name="gender" id="g2"><label for="g2">女</label><br><br><h2>兴趣爱好</h2><input type="checkbox" name="interest" id="h1" checked><label for="h1">篮球</label><input type="checkbox" name="interest" id="h2"><label for="h2">足球</label><input type="checkbox" name="interest" id="h3"><label for="h3">羽毛球</label><input type="checkbox" name="interest" id="h4"><label for="h4">乒乓球</label><hr><!-- 4.普通文字按钮 value属性:属性值就是按钮上显示的文字--><input type="button" value="登录"><input type="button" value="注册"><hr><br><!-- 5.button标签 --><button>登录</button><button>注册</button><br><br><button style="background-color;rgda(0,0,0,0);border: none;"><img src="https://img1.baidu.com/it/u=1900942348,2200054065&fm=253&fmt=auto&app=138&f=JPEG?w=150&h=150" alt=""></button><br><br><input type="time"><input type="color"></body>
</html>

六、 form标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- form标签 form标签又叫表单标签，它是一个容器，单独使用没有任何意义。这个容器中一般放表单相关标签用于用户信息收集：input、select、textarea在form标签中可以通过input标签来提供重置按钮和提交按钮，对表单的内容进行整体的重置和数据提交操作--><form action="" method="GET"><label for="">姓名</label><input type="text" name="" id=""><h3>生日</h3><input type="date" name="生日"><h3>性别</h3><input type="radio" checked name="gender"><label for="">男</label><input type="radio" name="gender"><label for="">女</label><br><br><!-- 如果希望重置按钮有效，必须将重置按钮和需要重置的内容放到同一个form标签中 --><input type="reset"><input type="submit"></form></body>
</html>

day1HTML常用标签相关推荐

滚动屏幕显示隐藏div_HTML结构-常用标签：a·img·table·form·input·iframe·div
学习目标: 掌握html的结构,head与body的区别掌握常用标签掌握a标签,img标签掌握table标签掌握form标签,input标签掌握iframe 和frameSet标签掌握di ...
mybatis常用标签和动态查询
这里是修真院后端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析后端知识/技能,本篇分享的是: [mybatis ...
1，html常用标签学习
1.html常用标签学习: 1.1.<em>和<strong>标签主要是用来做强调用的,其中<em>是让文字变成斜体,而<strong>把文字进行加粗显 ...
web.xml 常用标签配置（转）
2019独角兽企业重金招聘Python工程师标准>>> 1.Web.xml作用: 每一个javaWeb工程都有一个web.xml配置文件,web.xml文件是用来初始化工程配置信息的 ...
html(常用标签)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>常用标 ...
初始html(常用标签)
今天我们来学习Web前端的一些知识,这一阶段需要记忆的东西相对来说比较多,需要花时间记忆以及做好练习. 一.HTML初识 1.web服务本质 import socketdef main():sock ...
zblog php标签,201502200101 zblogphp调整“显示常用标签”个数方法
201502200101 zblogphp调整"显示常用标签"个数方法 6年前 (2015-02-20) 作者:iMoke 分类:原创·技术阅读次数:2509 ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
html简介及常用标签
目录一.html的简介 1.什么是html? 2.第一个html程序 3.html的规范(遵循) 4.html的操作思想二.html中常用的标签 1.文字标签和注释标签 2.注释标签 3.标题标签 ...

day1HTML常用标签

HTML常用标签

一、head中的标签

二、文字相关标签和相关符号

三、图片和超链接

四、列表标签

五、input标签

六、 form标签

day1HTML常用标签相关推荐

最新文章

热门文章