HTML入门之常用标签以及框架写法
2024-04-17 10:17:34
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><trstyle="text-align: center;"><!--一行数据都水平居中--><td>001</td><td>Jim</td><td>13527685948</td><td>河南省郑州市</td></tr><trstyle="height: 100px;"><!--一行数据高度均为100px--><tdstyle="vertical-align: top;">002</td><!--某一个数据垂直居中--><td>Kate</td><tdstyle="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="http://www.baidu.com" 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="http://www.baidu.com"></iframe></body>
</html>
HTML入门之常用标签以及框架写法相关推荐
- HTML5入门以及常用标签
HTML5入门以及常用标签 今日内容 web技术简介 什么HTML? W3C 浏览器 第一个HTML网页 web技术简介 web技术中的三大内容 HTML[基本内容] CSS[界面美化] JavaSc ...
- JavaWeb新手入门——HTML常用标签
1. HTML的书写规范 <html> <head><title>test-2021-1-8</title> </head> <bod ...
- JavaWeb之HTML入门及常用标签
HTML: 1.HTML的概述及作用: HTML全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式. ...
- 华为云前端一阶段HTML入门（常用标签 表格标签 表单）
HTML入门 HTML入门 1.1结构标签 div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系: span是会在一行中不断加入(内联标签),但当数量过多时也会 ...
- HTML-基本语法、常用标签、列表、超链接、超链接定义锚点、表格、表单和内联框架
HTML基本语法 <!-- <!DOCTYPE html> 声明告诉浏览器我们使用的是HTML5 --> <!DOCTYPE html> <!-- <h ...
- html入门基础知识及常用标签
一.html简介 html被称为超文本标记语言(简单来说就是比文本更加高级的语言),俗称网页,由内容和标签组合在一起的只能使用浏览器来观看的一种语言.不只是能放文字数字等,还可以放图文声像. html ...
- Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架 一.input标签常用属性 表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
- 常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面 二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...
- 前端入门教程(四)head内常用标签与body内常用标签
一 head内常用标签 1.meta相关标签 #1.指定字符集 <meta charset="gbk">#2.页面描述 <meta name="Desc ...
最新文章
- 使用postman修改SAP Marketing Cloud contact主数据
- HBase 默认配置项详细解读
- Scala集合：List增加元素及集合拼接操作
- tensorflow中tf.get_variable()函数详解
- bat窗口大小设置_Tomcat的JVM和连接数设置
- c++实现任意类型数组类的封装
- 前端学习（2780）：创建项目和外观
- windows进程中的内存结构（转）
- 百度天链平台：企业区块链技术赋能产业创新落地
- App设计之路——WebApp浅谈
- LeetCode入门题 两数之和
- hdu 1540 Tunnel Warfare （线段树维护左右最长连续区间）
- openGL超级宝典第七版
- 微信小程序 全套 视频 9ph7 教程 全部免费 百度网盘
- 硬盘“AHCI”模式和“IDE”模式的区别
- html文本间距1.5倍怎么设置,行距怎么设置18磅
- .pdm文件怎么打开
- 面向对象编写一个计算器
- 【重大突破】——移动端——如何手机端屏蔽掉网站,【小技巧】戒应用AppDetox，一个可以屏蔽管理APP的自律软件，马克保存
- Noteability的一些使用小技巧