1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML入门之常用标签以及框架写法

HTML入门之常用标签以及框架写法

时间:2021-03-06 18:38:46

相关推荐

HTML入门之常用标签以及框架写法

body中的主要标签

行内元素

a标签:超链接标签,双标签。

常用标签属性:

①href:指定打开的页面。

②target:用于指定在哪个窗口打开href标签属性指定的页面,常用属性值有_self (在本页面窗口中打开)、_blank(在新窗口中打开)。img标签:图片标签,单标签。

①src:设置图片路径。

②alt:设置图片不存在时的替代文本。

③height和width:设置图片的高度和宽度,单位为像素或%。

④title:设定鼠标移到该元素上时显示的信息。span标签:常用于组合文档中的行内元素,双标签。

①span标签没有固定的格式表现,只有对它应用CSS样式时才会产生视觉上的变化。

②span标签的定义方便了通过CSS样式格式化标签内的内容。

块级元素

div标签:常用于文档中分区,双标签。p标签:段落标签,双标签。

可以通过该标签中的text-align样式属性设置样式,其属性值有:

hn标签:标题标签,双标签,n的值为1~6。

跟p标签一样,也可以用text-align属性设置样式。ol标签:有序列表标签,双标签。

①type:指定ol子标签li的编号类型,其属性值有:

②start:指定ol子标签li序号起始点,默认为1,必须为整形数字。

③reversed:HTML5新增标签属性,用于设定列表顺序为降序,其属性值为reversed。ul标签:无序列表标签,双标签。

①type:指定ul子标签li的编号类型,其属性值有:

表格标签

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title><style>table{/*为所有table标签添加样式*/width: 720px;/*设置table宽度*/margin: 0 auto;/*设置table水平居中*/border: black 1px solid;/*添加边框*/border-spacing: 0px;/*去掉table标签以及其子标签边框之间的空隙*/border-collapse: collapse;/*去掉重合线*/}th{/*为所有th标签添加样式*/border: black 1px solid;/*添加边框*/}td{/*为所有td标签添加样式*/border: black 1px solid;/*添加边框*/}</style></head><body><table><tr><th>学号</th><th>姓名</th><th>手机号</th><th>家庭地址</th></tr><tr style="text-align: center;"><!--一行数据都水平居中--><td>001</td><td>Jim</td><td>13527685948</td><td>河南省郑州市</td></tr><tr style="height: 100px;"><!--一行数据高度均为100px--><td style="vertical-align: top;">002</td><!--某一个数据垂直居中--><td>Kate</td><td style="text-align: center;">18328574678</td><!--某一个数据水平居中--><td>北京市朝阳区</td></tr></table></body></html>

表单标签

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--action:指定表单数据的目的地method:设置使用哪个方法处理请求get-doGet;post-doPostget:地址栏显示数据,导致数据不安全;post:地址栏不会显示数据,安全,量可以很大enctype:默认为application/x-www-form-urlencoded,若要上传文件则需改成multipart/form-data--><form action="" method="" enctype="multipart/form-data"><!--hidden:设置隐藏框,页面不显示,主要用于向服务器端传递隐含数据name:设置隐藏框的name值,将来Servlet用于获取该框的数据value:用于设置默认值id:用于唯一标识该隐藏框,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同--><input type="hidden" name="id" value="000001" id="id"/><!--text:默认值,设置文本框name:用于Servlet获取该框的数据placeholder:设置提示信息value:用于设置默认值,此时placeholder不再显示id:用于唯一标识该文本框,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同maxlength:设置可以输入的最长字符个数readonly:设置文本框只读,但是数据仍可以被Servlet获取disabled:禁用文本框,数据不能被Servlet获取--><input type="text" name="user_name" placeholder="请输入数据" value="damin" id="user_name" maxlength="5" readonly="readonly" disabled="disabled"/><!--password:设置密码框name:用于Servlet获取该框的数据placeholder:设置提示信息value:用于设置默认值,此时placeholder不再显示id:用于唯一标识该密码框,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同maxlength:设置可以输入的最长字符个数readonly:设置密码框只读,但是数据仍可以被Servlet获取disabled:禁用密码框,数据不能被Servlet获取--><input type="password" name="password" placeholder="请输入数据" value="123456" id="password" maxlength="6" readonly="readonly" disabled="disabled" /><!--name:用于Servlet获取该框的数据id:用于唯一标识该下拉列表,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同mutiple:设置下拉列表多选,此时Servlet应调用request.getParameterValues()来获取数据--><select name="province" id="province" multiple="multiple"><option>---请选择---</option><!--value:设置选项值,将来该值被Servlet获取disable:禁用下拉项,使其不能被选择selected用于设置默认选择项--><option value="henan" disabled="disabled">河南省</option><option value="beijing" selected="selected">北京市</option><option value="chongqing">重庆市</option></select></form></body></html>

单选框和复选框

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--radio:设置单选框name:用于Servlet获取该框的数据value:用于设置选项值,此值会被Servlet获取id:用于唯一标识该单选框disabled:禁用单选框,数据不能被Servlet获取checked:用于设置默认选中项--><input type="radio" name="sex" value="0" id="female" disabled="disabled" /><label for="female">女</label><input type="radio" name="sex" value="1" id="male" checked="checked" /><label for="male">男</label><!--checkbox:设置单选框name:用于Servlet获取该框的数据value:用于设置选项值,此值会被Servlet获取id:用于唯一标识该单选框disabled:禁用单选框,数据不能被Servlet获取checked:用于设置默认选中项--><input type="checkbox" name="hobby" value="0" id="basketball" disabled="disabled" /><label for="basketball">篮球</label><input type="checkbox" name="hobby" value="1" id="pingpang" /><label for="pingpang">乒乓球</label><input type="checkbox" name="hobby" value="2" id="football" checked="checked" /><label for="football">足球</label></body></html>

文件框

<!--file:设置文件框name:用于Servlet获取该框的数据id:用于唯一标识该密码框,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同disabled:禁用文件框,数据不能被Servlet获取multiple:用于设置文件多选--><input type="file" name="" id="" multiple="multiple" />

文本域

<!--textarea:文本域name:用于Servlet获取该框的数据,request.getParameter()id:用于唯一标识该文本框,整个页面不唯一,不允许重复;在确保唯一的前提下,常与name的属性值相同resize:CSS样式属性,用于设置是否禁止调整文本域大小readonly:设置文本域只读,但是数据仍可以被Servlet获取disabled:禁用文本域,数据不能被Servlet获取--><textarea name="" id="" cols="120" rows="30" style="resize: none;">郑州大学</textarea>

提交按钮、重置按钮、普通按钮

<!--submit:提交表单value:设置提交按钮信息id:用于唯一标识该按钮disabled:禁用提交按钮--><input type="submit" value="提交" id="" disabled="disabled" /><!--reset:重置表单value:设置重置按钮信息id:用于唯一标识该按钮disabled:禁用重置按钮--><input type="reset" value="重置" id="" /><!--button:按钮value:设置按钮信息id:用于唯一标识该按钮disabled:禁用按钮--><input type="button" value="按钮" id="" />

fieldset和legend

当表单信息很多时,可以使用fieldset和legend来对表单内容进行分类:

<form action="" method="post"><!--基本信息--><fieldset><legend>基本信息</legend><input type="text"/> <br /><input type="text"/> <br /><input type="text"/> <br /></fieldset><!--问卷调查--> <fieldset><legend>问卷调查</legend><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /><input type="radio" /><input type="radio" /><input type="radio" /><br /></fieldset><input type="submit" value="提交"/></form>

框架

三个分页面:

头部页面:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>top</title><style>body{background-color: yellowgreen;}span{font-size: 36px;color: red;font-family: 宋体;}</style></head><body><span>头部</span></body></html>

左边页面:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>left</title><style>body{background-color: black;}span{font-size: 36px;color: white;font-family: 华文行楷;}</style></head><body><span>左边</span><a href="" target="right">百度一下,你就知道</a><!--在name为right的页面打开链接--></body></html>

右边页面:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>right</title><style>body{background-color: firebrick;}span{font-size: 36px;color: green;font-family: 宋体;}</style></head><body><span>右边</span></body></html>

总页面:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>index</title></head><!--框架--><frameset rows="20%,*"><!--上方占比20%,下方为剩下的--><frame src="top.html" /><frameset cols="20%,*"><!----><frame src="left.html" /><frame src="right.html" name="right"/></frameset></frameset></html>

结果:

iframe:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--将页面插入网页--><iframe src=""></iframe></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。