【前端从0开始】HTML基础——3、HTML标签(2)

最新推荐文章于 2024-06-02 21:27:33 发布

程皮

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量48

点赞数

分类专栏：前端从0开始文章标签：前端 html

本文链接：https://blog.csdn.net/a1137588003/article/details/132198259

版权

前端从0开始专栏收录该内容

30 篇文章 1 订阅

订阅专栏

8、列表标签
分类：有序列表，无序列表，自定义列表
如果想要在页面上显示新闻业的内容，或者显示一列文字，可以使用列表
如图所示，百度新闻，腾讯新闻，网易新闻；还有一类用作网站栏目，比如小米官网栏目

<ul type="disc|square|circle">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>6</li>
</ul>
<ol type="a|A|i|I" start="num">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>6</li>
</ol>
<!-- 
ul 元素表示这是一个无序列表 
li 元素表示表内部的列表项，每一条
-->
disc默认值实心圆，square正方形，circle空心圆

ul：unordered list 无序列表
ol：ordered list 有序列表

图文并茂

<figure>
    <figcaption>这是一张图</figcaption>
    <img src="1.png" width="200">
</figure>
<!-- 
figure 插图元素
figcaption 表示插图的标题内容 说明
-->

9.、表格标签

9.1 表格基础标签

在过去表格标签⽤的⾮常多，很多⽹站都是⽤表格标签进⾏布局，展示数据的。

table：表格
tr：table rows ⾏
td：table dock 单元格

表格标签之间是相互嵌套的。table>tr>td
如果我们需要添加表头的语义，可以使⽤⼀个新的标签，th标签，th：table head 表示表头单元格，替换的是td的位置，table>tr>th

<table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

表格宽高

表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。
如果给td设置width和height，会修改当前单元格的宽和⾼，但不会影响这个表格的宽和高。

9.2 属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
align：内容⽔平对⻬⽅式
valign：内容垂直对⻬⽅式

<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center">
    <tr align="center" valign="middle">
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
    <tr>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td>6300</td>
    </tr>
</table>

9.3 合并单元格

rowspan：合并列方向单元格
colspan：合并行方向单元格
属性值是⼀些数字，表示合并单元格的数量
上边线在同⼀⾏的，就算在同⼀⾏

<table border="1">
    <tr>
        <td colspan="2">UZIYYDS</td>
        <td>adc</td>
        <td>我去洗个澡</td>
        <td>4800</td>
    </tr>
    <tr>
        <td>孤⼉索</td>
        <td>疾⻛剑豪</td>
        <td>中单</td>
        <td>狂⻛绝息斩</td>
        <td rowspan="2">6300</td>
    </tr>
    <tr>
        <td>⼈⻢</td>
        <td>战争之影</td>
        <td>打野</td>
        <td>⻢踏⻜箭</td>
    </tr>
</table>

9.4 表格分区

标题：caption
表头：thead
页脚：tfoot
主体：tbody
语义化标签。
tfoot的位置在thead与tbody之间
这四个表格分区标签本身没有任何样式，仅仅是⼀个区块划分标记罢了

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0">
  <caption>学生信息表</caption>
  <thead>
  <tr align="" valign="" bgcolor="">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>班级</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>章三</td>
    <td rowspan="2">男</td>
    <td>19</td>
    <td>java</td>
  </tr>
  <tr>
    <td>大张伟</td>
    <td>18</td>
    <td rowspan="2">python</td>
  </tr>
  <tr>
    <td>章子怡</td>
    <td>女</td>
    <td>19</td>
  </tr>
  </tfoot>
</table>

table 元素表示一个表格的声明
tr 元素表示表格的一行
td 元素表示一个单元格
默认的 table 表格是没有边框的 border属性表示增加一个边框
th 为表格添加标题单元格实际作用就是内部文字居中加
td th均属于单元格，包含2个属性 colspan rowspan
colspan 表示合并一行所在列合并
rolspan 表示合并一列所在行合并

10、表单

10.1 form表单

在这里插入图片描述
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

<form  action=""  method=""  enctype=""   name="" >
  表单元素
  ……
</form>

action：属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL
method：属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.
enctype：属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：
●application/x-www-form-urlencoded（默认的设置，没有文件上传可以不加）
●multipart/form-data (有文件上传)

10.2 表单的作用

搜集不同类型的用户输入信息
表单是由网页上可以提供用户输入和选择的⼀些控件（表单元素）组成的

10.3 表单元素

10.3.1 单行文本框

属性：type="text"

<input  type="text"   name=""  size=""   maxlength="" placeholder='' value="" />
<!--
type：值为text为单行文本框
size: 文本框的长度
maxlength：文本框可以输入内容的最大长度
placeholder：占位符
value：输入的内文本
name：自定义名称
-->

10.3.2 密码框

属性：type="password"

<input  type="password"   name=""  size=""   maxlength=""  value="" />

10.3.3 多行文本框

<textarea  name=""   cols=""    rows=""  ></textarea>

注意：默认点击边框有一个蓝色的边框 input:focus{ outline: 0;}

10.3.4 单选框

属性：type="radio"

<input type="radio"  name=""  value=""  checked="checked" />
<!--
type：radio表示单选框
checked：默认选中
-->

注意：单选框name值相同则为同一按钮组；
单选框中被提交的值是value中的值

10.3.5 label

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<form>
  <label for="male">男</label>
  <input type="radio" name="sex" id="male" />
</form>

for属性：规定 label 绑定到哪个表单元素
< label > 标签的 for 属性应当与相关元素的 id 属性相同

10.3.6 复选框

属性：type="checkbox"

<input type="checkbox" name="hobby[]" value="乒乓球">
<input type="checkbox" name="hobby[]" value="篮球">
<input type="checkbox" name="hobby[]" value="羽毛球">
<input type="checkbox" name="hobby[]" value="网球">

注意：复选框name值必须为同名数组则为同一按钮组

10.3.7 下拉菜单

<!-- 单选下拉菜单 -->
<select name=""   size=""  >
	<optgroup label=分组名称>
		  <option value= " "   selected=selected></option>
        ……
    </optgroup>
 </select>
<!-- 多选下拉菜单 -->
<select name=""   size=""  multiple= "multiple" >
	<optgroup label=分组名称>
		  <option value=""   selected=selected></option>
        ……
    </optgroup>
 </select>

size：下拉菜单的高度
multiple：多重的，多个的

10.3.8 浏览框

<input  type="file"   name=""  accept="" />

accept：限制文件上传格式
accept=“.csv” 上传.csv格式
accept=“application/vnd.ms-excel” 上传.xls格式
accept=“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet” 上传.xslx格式
accept=“text/plain” 上传.png/.jpg/etc格式
accept=“image/" 上传图片格式
accept=“text/html” 上传.htm,.html格式
accept="video/” 上传video(.avi, .mpg, .mpeg, .mp4)格式
accept=“audio/*” 上传audio(.mp3, .wav, etc)格式
accept=“.pdf” 上传.pdf格式
accept=“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel” 如果限制两种文件格式，同时限制
注意：表单提交方式必须为post
form必须设置属性enctype=“multipart/form-data”

10.3.9 隐藏域

<input  type= " hidden"   name=""   value="" />

注意：隐藏域不会在页面的显示
隐藏域的值仍会被提交到服务器

10.3.10 按钮

按钮有三种：普通、提交、重置
●普通 type=“button” 配合js完成⼀些操作
●重置 type=“reset” 重置表单数据有默认的按钮标题。
●提交 type=“submit” 提交表单

<input  type= "submit"   name=""   value=""/>

重置按钮

<input  type= "reset"   name=""   value=""/>

普通按钮

<input  type= "button"   name=""   value=""/>

图片按钮

<input  type= "image"  src=""  name=""   value=""/>

10.3.11 readonly和disable属性

readonly

readonly 属性规定输入字段为只读,但其value值仍会被表单提交
readonly属性只针对text、password和textarea有效

disabled

disabled属性规定禁用该表单元素，其value值不会被表单提交
disabled属性对所有表单元素均有效，包括select, radio, checkbox, button等
使用disabled属性后表单元素背景会变成灰色

表单属性总结

在这里插入图片描述

11、框架

在这里插入图片描述

<frameset  rows| cols="10%,*，20%" >
     <frame  name="" src=""  noresize="noresize"  scrolling="yes/no/auto" />
     <frame  name="" src="" >
</frameset>

frameset属性
●rows 行数
●cols 列数
●frameborder 0/1 规定是否显示框架边框
●border 设置边框粗细

frame属性
●noresize 规定无法调整框架的大小
●scrolling yes/no/auto 规定框架是否出现滚动条
注：不能将标签与标签嵌套使用

11.1 frameset跳转

跳转到frame指定板块

给对应的frame定义name名字
< frame name=“right” src=“left.html”/ >
修改跳转方式
< a href=“one.html” target=“right”>第一页

11.1.1 noframes

<frameset cols = "25%,*"> 
	<noframes> 
		<body>
			你的浏览器不支持框架
		</body> 
	</noframes> 
	<frame src ="" /> 
	<frame src ="" /> 
</frameset>

noframes 元素可为那些不支持框架的浏览器显示文本
必须把其中的文本包装在标签中
在XHTML 1.0 Strict DTD 中，标签是不被允许

11.2 iframe内连框架

<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

name:规定 iframe 的名称
src:规定在 iframe 中显示的文档的 URL
width:规定 iframe 的宽度
height:规定 iframe 的高度
scrolling:规定是否在 iframe 中显示滚动条

11.2.1 iframe跳转

<iframe name="" src="" frameborder="0|1" width="" height="" scrolling="no|auto|yes"></iframe>

<a href="http://www.baidu.com" target='_top|_parent'>百度</a>

程皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【前端从0开始】HTML基础——3、HTML标签(2)

/frameset属性●rows 行数●cols 列数●frameborder 0/1 规定是否显示框架边框●border 设置边框粗细frame属性●noresize 规定无法调整框架的大小●scrolling yes/no/auto 规定框架是否出现滚动条注：不能将标签与标签嵌套使用。
复制链接

扫一扫