入门HTML——高级标签

359 阅读2分钟

有序列表

<ol type="" target="" reversed="reversed" >
<li></li>
<li></li>
<li></li>
</ol>
type=""

排序类型,有五种排序类型1/a/A/i/I,无设置时默认排序类型为1。

target=""

设置从第几个开始排序,无论哪一种排序方式都只需使用阿拉伯数字来设置想要从第几个开始排序。

reversed="reversed"

设置倒叙排列。


无序列表

<ul type="">        
<li></li>
<li></li>
<li></li>
</ul>

type=""设置排序前的图形,有三种disc/square/circle。

注:如果一个功能有很多功能子项组成,每一个功能子项的功能和样式基本上都是相同的,只不过内容可能有点小差异,很多个功能子项组成了一个大功能。这样的东西最好用无序列表来展示,无序列表更符合它的结构。


插入图片

<img src="" alt="" title="">
src=""

图片地址

1.网上的url(网上的超链接)

2.本地的绝对路径

html文件和图片文件在同一目录里,路径成相对关系,这时是绝对路径。引入图片时只需要写图片文件名。

3.本地的相对路径

不在同一目录里,这时是相对路径。引入时需写明完整路径。

alt=""

图片占位符,图片有问题时会显示出文字信息。

title=""

图片提示符,当鼠标移到图片上时,会有文字信息。


a标签

超链接
<a href="" target="_blank">
<img src="">
</a>

中间可输入网址,也可插入图片。插入图片后,点击图片可跳转到相应网址。

href="" 输入网址,告诉电脑要到哪里。

target="_blank" 使链接在新的页面中打开。

锚点
<a href="#demo1">
find demo1
</a>
电话/邮件
<a href="tel:138.......">
打电话
</a>
<a href="mailto:.......">
发邮件
</a>
协议限定符
<a href="javascript:while(1){alert('让你手欠')}"><!--死循环-->
你点我试试
</a>

运行页面:


表单标签

发送数据,把前端的数据发送给后端工程师。

method发送数据的方式(get/poat)

action发送给谁(地址)

数据发送成功需有数据名和数据值。

输入框 密码框
<form method="get" action="">
<p>
username <input type="text" name="username">
</p>
<p>
password <input type="password" name="password">
</p>
<!--name里为数据名-->
<input type="submit" value="login">
</form>

运行页面:

单选
<form method="get" action="">
<input type="radio" name="" value="" checked="checked">
                             <!--"checked"设置默认选中-->
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<!--将name统一成一个名字,就是一道单选题,这样就只能选一个-->
<!--value里为数据值-->
<input type="submit">
</form>
复选
<form method="get" action="">
<input type="checkbox" name="" value="" checked="checked">
                             <!--"checked"设置默认选中-->
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<!--value里为数据值-->
<input type="submit">
</form>
下拉菜单
<form method="get" action="">
<select name="p">
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select>
<input type="submit">
</form>

运行页面:


回车

<br>    <!--换行符-->

标签正常都是成对出现的,标签的意义在于把它包裹的文本作用成它想作用成的样子,一般标签成对出现是修饰里面的内容,有些标签它自己就代表着功能,不需要包裹任何东西就能展现出功能。 如

<meat>
<hr>    <!--水平线-->

HTML特殊编码符

空格 = &nbsp;(空格在html语言里,不是空格文本,是文本分隔符。)

“<” = &lt;

“>” = &gt;