HTML常用的行级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML常用的行级元素</title>
<!--行级元素的特点:不独占一行-->
</head>
<body>
<!--————————————————————————————————————————————————————————————————————————-->
<a href="https://www.baidu.com/">百度</a><br>
<!--【a标签】是链接标签,href属性设置为【要跳转的网址】-->
<!--href即Hypertext Reference,指定超链接目标的URL,是css代码的一种。-->
<!--Hypertext/'haɪpətekst/n. 超文本-->
<a href=".\test.html">跳转到本地网页“test.html”</a><br>
<!--在实际开发中建议使用相对路径,因为绝对路径可能不好用-->
<!--./表示当前目录,../表示上级目录-->
<!--路径中尽量不要有中文(事实上,在本人电脑上,使用中文确实会出现问题)-->
<a href=".\test.html" target="_blank">跳转到本地网页“test.html”</a><br>
<!--默认情况下,超链接目标的页面都是【在当前页面打开的】-->
<!--如果我们要让超链接目标的页面【在新窗口打开】,则需设置属性target为"_blank"-->
————————————————————————————————————————————————————————————————————————
<a href="#sina" rel="nofollow" target="_self">点击此处到目标位置</a>
<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><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="sina">目标位置</a><br>
<!--通俗的讲,我们想要让页面跳转到的位置,就是锚点。-->
<!--锚点是一种超链接,只不过它是页面内部的超链接,它指向页面特定的部分。-->
<!--锚点可以用a标签来定义-->
<!--第一个a标签的href由自己设置,【href的值】一定要和【与之对应的a标签的name的值】一样-->
<!--rel="nofollow":告诉爬虫该页面无需追踪。-->
<!--target="_self:目标页面是本页面-->
————————————————————————————————————————————————————————————————————————
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539592256&di=9e5f5cb89086e2fbc7515892e39f361e&src=http://i1.hdslb.com/bfs/archive/2d5486d9dd23eff70ee4b693341f14ffbe9ebdc1.jpg"
alt="图片加载失败了"
title="这是一张二次元1080P大图"
width="300px"><br>
<!--图像标签img是单标签,不需要闭合-->
<!--属性src:图片的地址【网络(右键单击图片->复制图片地址)或本地】
src是source的缩写,这里是源文件的意思-->
<!--属性alt:用于图片加载失败的替换文字(必须存在)
和键盘上的alt键一样,是alter的缩写,即替换、改变
当HTML元素本身的物件无法被渲染时,就显示alt(替换)文字作为一种补救措施。-->
<!--属性title:鼠标悬停在图片时显示出的提示信息(可写可不写)-->
<!--属性width:设置图片的宽度,该属性的值的单位是px
px就是pixel的缩写
pixel即像素,由 Picture(图像) 和 Element(元素)这两个单词的字母所组成
px是就是一张图片中最小的点,一张位图就是由这些点构成的。
如果是1024×768,也就是说水平方向上有1024个点,垂直方向上有768个点。
“点”可以画的很小,也可以很大。
如果点很小,那么图片就小,画面就清晰,我们称它为“分辨率高”。
像素的大小是会“变”的,因此也被称为“相对长度”。-->
<!--属性height:设置图片的高度
一般情况下,width和height只设置一个,这样能够保持纵横比-->
————————————————————————————————————————————————————————————————————————
<!--文本标签-->
<b>b标签:加粗</b><br>
<i>i标签:倾斜</i><br>
<strong>strong标签:加粗,具有强调意义,关系到搜索引擎的优化</strong><br>
<em>em标签:倾斜,具有强调意义,关系到搜索引擎的优化</em><br>
<!--类比一下word里的按钮-->
————————————————————————————————————————————————————————————————————————
<span style="color:red">这是一行红色的字</span><br>
<!--span:无语义的行级元素,一般span标签也是配合css使用,来设置文本当中一部分内容-->
————————————————————————————————————————————————————————————————————————
<!--HTML实体字符-->
空格 <br>
< 小于号 <<br>
> 大于号 ><br>
© 版权(copyright) ©<br>
使用的时候上网查就好了<br>
————————————————————————————————————————————————————————————————————————
<form action="" method="get">
<!--form标签来划定一个表单区域,form有两个必须存在的属性
属性action:数据的提交地址
属性method:提交方式。提交方式分为两种get、post
表单提交默认是以get方式进行数据的传输
get:通过URL地址传输数据,数据会显示在URL地址栏当中
传输的数据有大小限制,根据浏览器的不同数据大小不同
相对来说不安全
post:数据不通过URL地址传参,相对来说比较安全
数据传输没有具体的大小限制
一般表单指定使用post方式提交数据-->
<!--
如果表单要实现文件上传功能,则必须指定
属性enctype = "multipart/form-data"
enctype即encoding type,文件转码类型
-->
用户名 <input type="text" name="username"><br>
密 码 <input type="password"><br>
性 别 <input type="radio" name="sex" value="1">男 <br>
<input type="radio" name="sex" value="0">女 <br>
爱 好 <br>
<input type="checkbox" name="love[]" value="A">动画 <br>
<input type="checkbox" name="love[]" value="C">漫画 <br>
<input type="checkbox" name="love[]" value="G">游戏 <br>
<input type="checkbox" name="love[]" value="N">小说 <br>
职 业 <br>
<select name="job" >
<option value="0">国家机关、党群组织、企业、事业单位负责人</option><br>
<option value="1">专业技术人员</option><br>
<option value="2">办事人员和有关人员</option><br>
<option value="3">商业、服务业人员</option><br>
<option value="4">农、林、牧、渔、水利业生产人员</option><br>
<option value="5">生产、运输设备操作人员及有关人员</option><br>
<option value="6">军人</option><br>
<option value="7">不便分类的其他从业人员</option><br>
</select><br>
请上传你的身份证照片: <br>
正面<input type="file" name="ID0"><br>
反面<input type="file" name="ID1"><br>
<br><br>
发个友善的弹幕见证当下吧~ <br>
<textarea name="text" id="" cols="80" rows="3"
>请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。</textarea>
<input type="submit" value="提交上述全部内容"><br>
<input type="reset" value="重置上述全部内容" ><br>
<input type="reset" value="被禁用的重置按钮" disabled><br>
只读的文本输入框<input type="text" name="readonly"
value="我是默认值,是不可更改的" readonly><br>
设置了提示的文本输入框<input type="text" name="placeholder"
placeholder="请输入用户名"><br>
<!--
text:普通文本输入框
password:密码输入框
radio:单选按钮
checkbox:多选按钮
select:下拉框
file文件上传选框
textarea文本域
submit提交按钮
reset重置按钮
-->
<!--
在这个过程中,后台生成了一个类似python中dict的结构,name即键,value即值
{username:"uuz",sex:"0",love:[A,C,G,N],job:"7"}
-->
</form>
</body>
</html>