Day11
1. 文本标签
1.1 html的基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1.2 各类标签
<!--我是一个注释-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--charset用于页面指定编码-->
<meta charset="UTF-8" />
<!--页面标题，显示在页面-->
<title>这是一个HTML</title>
</head>
<body>
<!--标题标签：<h1>,<h2>,<h3>....<h6> -->
<h1>Hello World!”</h1>
<h2>Hello World!”</h2>
<h3>Hello World!”</h3>
<h4>Hello World!”</h4>
<h5>Hello World!”</h5>
<h6>Hello World!”</h6>
<!--段落标签：<p> -->
<p>中新网7月5日电国家卫健委5日就健康“健康中国2030”规划纲要》2020年阶段性目标总体如期实现，健康中国行动2022年主要目标提前实现，健康中国建设开局起步良好、进展顺利，为我国全面建成小康社会、推动“十四五”经济社会发展发挥了重要作用。</p>
<p>毛群安指出，健康中国行动实施取得了明显的阶段性成效：</p>
<!--标题标签和段落标签会自动换行（一个标签代表代表一行或者一段，写下一个标签的时候自动另起一行）-->
<!--文字倾斜标签：i, em-->
<!--文字加粗标签b, strong-->
<i>
<b>文字倾斜又加粗</b>
</i>
<b>
<i>文字倾斜又加粗</i>
</b>
<em>文字倾斜</em>
<strong>文字加粗</strong>
<!--换行标签:br-->
<br>
<!--水平线标签：hr-->
<hr>
<!--html页面敲任意多个空格恒等于一个空格-->
<!--html中一个空格可以用下列两种方式表示： 或者  -->
<!-- 表示一个像素单位的空格(px)单位的空格-->
<!-- 表示一个汉字的宽度，1个  = 16个 -->
<!--行内标签：span-->
<span>我的京东</span> | <span>京东会员</span> | <span>登录 注册</span><br>
<span>我的京东</span> | <span>京东会员</span> | <span>登录  注册</span>
</body>
</html>
运行结果
2. 超链接和图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的html</title>
</head>
<body>
<h1 id="top">顶部</h1>
<!--图片标签：img-->
<!--src:1.可以写入链接。2.可以写本地图片的路径-->
<!--title:鼠标放在图片上可以提示文字-->
<!--alt:当图片不显示时，显示文字-->
<!--width、height:能够修改图片、标签盒子等的显示宽度和高度-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
alt="百度" title="点击一下，了解更多">
<img src="./img/1.jpg" alt=""width="100px" height="250px">
<!--超链接标签：a-->
<!--herf:
1.引入在线链接
2.可以引入本地文件（html文件）
3.可以引入id选择器
-->
<!--target:
1._self:当前标签页跳转（默认）
——blank:新的标签页跳转
-->
<a href="https://www.baidu.com">百度一下</a>
<a href="./01_文本标签.html">文本标签</a>
<!--将图片变为可点击的链接-->
<a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html" target="_blank">
<img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" alt="">
<p>一人之下手游</p>
</a>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p id="mid"></p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<p>因为旁边的小蝌蚪还在畅游，也有说“前方的蝌蚪赢麻了...”</p>
<!--页面跳转-->
<!--id属性如何调用:使用#调用id属性-->
<a href="#top">返回顶部</a>
<a href="#mid">返回中部</a>
</body>
</html>
运行结果
中间（略）
3. 列表内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!---->
<!--iframe:内联框架-->
<!--iframe:经常被用在登录、注册页面-->
<iframe src="http://www.bilibili.com" width="1920px" height="800px"></iframe>
<!--列表：有序列表Ol、无序列表ul、-->
<!--列表中的内容放在li-->
<!--列表在网站中主要用来做下拉菜单和展示同一类内容-->
<ul>
<p>关于IT</p>
<li>Java</li>
<li>前端</li>
<li>Python</li>
<li>UI</li>
<li>物联网</li>
</ul>
<ol>
<p>关于IT</p>
<li>Java</li>
<li>前端</li>
<li>Python</li>
<li>UI</li>
<li>物联网</li>
</ol>
</body>
</html>
运行结果
中间（略）
4.input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"><br>
<!--input：默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式-->
<!--placeholder：输入框的提示性文字-->
<!--maxlength：限制输入内容的长度-->
<span>密码：</span>
<input type="password" placeholder="请输入密码" maxlength="6">
<!--value:当input为按钮时，在按钮上显示文字-->
<input type="submit" value="登录"><br>
<input type="color">
<input type="file">
<input type="date">
<input type="time">
<br>
<p>请选择你的性别：</p>
<!--radio：单选框-->
<!--name：告诉系统两个单选框属于同一类-->
<!--将单选框中的 id属性值 设置为和 lable标签 中的for属性值相同，表示相关联-->
<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>
<input type="radio" name="gender" id="gender3"><label for="gender3">猪猪侠</label>
<input type="radio" name="gender" id="gender4"><label for="gender4">菲菲公主</label>
<br>
<p>今晚吃啥</p>
<!--checkbox：复选框-->
<input type="checkbox" name="food" id="one"><label for="one">水饺</label>
<input type="checkbox" name="food" id="two"><label for="two">火锅</label>
<input type="checkbox" name="food" id="three"><label for="three">烧烤</label>
<input type="checkbox" name="food" id="four"><label for="four">空气</label>
</body>
</html>
运行结果
学习爬虫就需要了解前端的结构，今天是浅学前端的第一天哦！
Day 11 over!
扫一扫
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
