Html的一些简单很重要的元素用法

标题

标题标签从h1到h6 有6种 分别从大到小

	<h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>

列表

有序列表

会显示序号 1. 2. 3.

<ol>  //oderlist
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
</ol>

无序列表

<ul>  //unoderlist
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
</ul>

自定义列表

<dl>  //definelist
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
</dl>

超链接

这是一个超链接a标签

<a href=""></a>

他的作用有:

1. 跳转网页
2. 跳转当前网页位置

跳转网页可以在 href 里面填入网站地址或者本地文件,进行跳转

• 跳转网站地址

<a href="https://www.csdn.net/"></a>

• 跳转本地html文件

<a href="./某某.html"></a>

可以在a标签里面加上target属性,并设置值为 _blank
这样在跳转的时候就会打开一个新窗口显示跳转后的网站

<a href="https://www.csdn.net/" target="_blank"></a>

另外在写本地文件的时候最好用相对路径,因为你把项目上传到比如腾讯云的服务器上时,绝对路径就很可能出错.因为假如你绝对路径写的是D盘,但上传到服务器后,文件跑到了E盘,这样就找不到文件了.

./ 是当前目录 也就是你正在编辑的文件所在目录

. ./是父级目录 是当前文件夹的上一级文件夹

跳转当前网页位置

用href="#top" 其中#表示在当前页面寻找id为top的标签

图片

img标签用来在页面上显示图片

src : 填写要显示的图片路径

<img src="./imges/xx.jpg">

一般来说要正常使用 img 都要设置一下图片的宽和高 不然图片有多大就显示多大

width: 700px 是指宽度为700像素点 height 同理

<img style="width: 700px;height: 400px;" src="./img/xx.jpg">

一些常用的表单控件

表单是一个包含表单元素的区域

<form method="get">
	//文本域
	Username:<input type="text" name="username"> //当用户要在表单中键入字母、数字等内容时,就会用到
	//密码
	Password:<input type="password" name="pwd"> //当用户输入密码 不会明文显示 以*号代替
	
	//单选框
	<input type="radio" name="sex" value="male" checked>男  //添加checked属性 可以默认被选中
	<input type="radio" name="sex" value="female">女 //要实现单选 name的值必须一样
	
	//复选框
	<input type="checkbox" name="vehicle" value="Bike">拖地
	<input type="checkbox" name="vehicle" value="Car">洗碗

	//提交
	<input type="submit" value="Submit">
</form>

css选择器

选择器优先级:

Id选择器>class选择器>元素选择器