常用高级标签

目录

  • img
  • a
  • iframe
  • ul
  • ol
  • form
    • input
    • select
    • textarea
    • 表单代码及结果演示
  • div、span

img

加载一张图片

常用属性:
src:指定图片路径
height:设置图片大小,自动等比例缩放,只设置height或者width即可,否则会失真
alt:图片加载不出来显示的文字
title:鼠标悬停在图片上面时的文字
在这里插入图片描述
常用高级标签_第1张图片

a

超链接 网页跳转

常用属性:
href:指定网页路径,可以是本地地址、也可以是网络地址
target:在哪个位置打开新的网页,默认是_self,可选_self(当前窗口)、_blank(新窗口)。如果有窗口嵌套则还有_parent(当前窗口的父窗口)、 _top(当前窗口的顶级窗口)

<a href="https://www.baidu.com">baidua><br>
<a href="https://www.baidu.com" target="_blank">baidua>

(点击第二个超链接,打开新窗口)
在这里插入图片描述

iframe

内联框架

<iframe src="frame_a.html" frameborder="2" width="500px" height="500px">iframe>

常用高级标签_第2张图片常用高级标签_第3张图片

ul

无序列表ul–>li
type可选属性:
disc square circle

<ul>
	<li>中国
		<ul type="square">
			<li>广东li>
			<li>河南li>
			<li>黑龙江li>
		ul>
	li>
	<li>美国
		<ul>
			<li>纽约li>
			<li>华盛顿li>
		ul>
	li>
	<li>巴西
		<ul>
			<li>里约热内卢li>
			<li>巴西利亚li>
		ul>
	li>
ul>

常用高级标签_第4张图片

ol

有序列表ol—>li
type属性可选:
1 A a I i

<ol>
	<li>小明290分
		<ol type="A">
			<li>语文99li>
			<li>数学96li>
			<li>英语95li>
		ol>
	li>
	<li>小红280分li>
	<li>小丽270分li>
ol>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210129212153849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pfeGlhb2JhaWNhaQ==,size_16,color_FFFFFF,t_70

form

表单
用于提交数据,请求转发给后端处理,处理完后响应回给浏览器,然后显示页面
name属性,其值自定义
非常重要对于表单的提交,通过name来匹配提交的数据
提交格式:
url?name1=value1&name2=value2&name=value

input

type属性,其值可取
text
password
radio
checkbox
file文件控件
hidden 隐藏控件(不希望在浏览器可见,只传数据)

修饰字
readonly只可读,可以提交给服务器
disabled只可读,不可以提交给服务器

maxlength=“num”(num表示最多输入的字符长度1 )

select

下拉列表
内嵌option标签
若要多选,则添加multiple size=“number” (其中number为最多能选的条数)
按住Ctrl键+鼠标左键进行选择

textarea

文本域

表单代码及结果演示

<form action="https://www.baidu.com" method="GET">
	<br>姓名<input type="text" name="name" value=""/>
	<br>密码<input type="password" name="password" value=""/>
	<br>性别<input type="radio" name="sex" value="0" checked/><input type="radio" name="sex" value="1"/><br>爱好<input type="checkbox" name="hobby" value="0"/>
			<input type="checkbox" name="hobby" value="1" checked/>
			<input type="checkbox" name="hobby" value="2" checked/>
			<input type="checkbox" name="hobby" value="3"/>
	<br>学历<select name="xueli" id="">
		<option value="0">小学option>
		<option value="1">初中option>
		<option value="2">高中option>
		<option value="3">专科option>
		<option value="4" selected>本科option>
	select>
	<br>公司<select name="gongsi" id="" multiple size="2">
		<option value="0" selected>腾讯option>
		<option value="1">阿里option>
		<option value="2" selected>网易option>
		<option value="3">百度option>
		<option value="4">新浪option>
	select>
	<br>简介<textarea name="jianjie" id="" cols="30" rows="10" value="">textarea>
	<br><input type="button" name="anniu" value="触发按钮">
	<br><input type="reset" name="chongzhi" id="" value="重置">
	
	<br><input type="submit" name="tijiao" value="提交">
form>

常用高级标签_第5张图片

div、span

div 单独占一行
span 不单独占行

你可能感兴趣的:(#html,前端学习,html,html5)