文章目录

  • 一、文件标签
  • 二、文本标签
  • 三、图片标签
  • 四、列表标签
  • 五、连接标签
  • 六、表格标签
  • 七、表单标签
  • 八、简单案例


一、文件标签

文件标签：构成html最基本的标签

  1. html：html文档的根标签
  2. head：头标签。用于指定html文件
  3. title：标题标签
  4. body：体标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
二、文本标签

和文本有关的标签

  1. 注释：
  2. h1 to h6：标题标签
    h1 to h6:字体大小递减
  3. p：段落标签
  4. br：换行标签
  5. hr：展示一条水平线
    属性：
  • color：颜色
  • width：宽度
  • size：高度
  • align：对齐方式
  • center：区中
  • left：左对齐
  • right：右对齐
  1. b：字体加粗
  2. i：字体斜体
  3. font：字体标签
    属性
  • color：颜色
  • size：大小
  • face：字体
  1. 属性定义
    color
  • 英文单词：red，yellow，blue
  • rgb(值1，值2，值3)：指的范围在0-255，如：rgb(0,0,255)
  • #值1值2值3：值的范围：00-FF之间，如：#0000FF

width

  • 数值：width=‘20’，数值的单位，默认是px（像素）
  • 数值%：占比相对于父元素的比例
三、图片标签

展示一张图片


四、列表标签
  1. 有序列表
  • ol：
  • li：
<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>
  1. 无序列表
  • ul：
  • li：
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
五、连接标签
  1. a：定义一个超链接
    属性
  • href：指定访问资源的URL（统一资源定位）
  • target：指定打开资源的方式
  • _self：默认值，在当前页面打开
  • _blank：在空白页面打开
六、表格标签
  1. table：定义表格
  • width：宽度
  • border：边框
  • cellpadding：定义内容和单元格的距离
  • cellspacing：定义单元格之间的距离，若指定为0，则单元格的线会合为一条
  • bgcolor：背景色
  • align：对齐方式
  1. tr：定义行
  • bgcolor：背景色
  • align：对齐方式
  1. td：定义单元格
  • colspan：合并列
  • rowspan：合并行
  1. th：定义表头单元格
  2. caption：表格标题
  3. thead：表示表格的头部分
  4. tbody：表格的体部分
  5. tfoot：表格的脚部分
七、表单标签

用于采集用户输入的数据，用于与服务器进行交互

  1. form：用于定义表单的，可以定义一个范围，范围代表采集数据的范围
    属性
  • action：指定提交数据的URL，跳转位置
  • method：指定提交方式
    分类：一共7种，主要使用两种
  1. get：
  1. 请求参数会在地址栏中显式。会封装到请求行中
  2. 请求参数大小是有限制的
  3. 不太安全
  1. post
  1. 请求参数不会在地址栏中显式。会封装到请求行中
  2. 请求参数大小没有限制的
  3. 较为安全

表单中的数据想要被提交，就必须指定其name属性

<form action="#" method="get">
	用户名：<input name="username" type="text">
</form>

表单项标签：

input：可以通过type属性值，改变元素展示的样式

type

  • text：文本输入框，默认值
    placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动提空提示信息
  • password：密码输入框
  • radio：单选框（在默认值上加上checked）
    注意：
  1. 要想让多个实现框实现单选效果，则多个单元框的name属性必须一致
  2. 一般会给每一个单元框提供value属性，指定其被选中后的值
  3. checked属性，可以指定默认值
  • checkbox：复选框（在默认值上加上checked）
    注意：
  1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
  2. checked属性们可以指定默认值
  • file：文件选择框
  • hidden：隐藏域，用于提交一些信息
  • 按钮
  1. submit：提交按钮，可以提交表单
  2. button：普通按钮
  3. image：图片提交按钮
    src属性置顶图片位置
  • date/datetime-local：日期/日期时间
  • email：email的简单检验
  • label：指定输入项的文字描述信息
    注意：label的for属性的一般会和input的ID属性值对应，若对应，则点击label区域，会让让input输入框获取焦点

select：下拉列表

  • 子元素：option，指定列表项

textarea：文本域

  • cols：指定列数，每一行有多少个字符
  • rows：默认多少行
八、简单案例
<body>
<form action="#" method="get">
    <label for="username">用户名</label>:<input name="username" type="text" placeholder="请输入用户名" id="username"/><br>
    <label for="username">密码</label>:<input name="password" type="password" placeholder="请输入密码"><br>
    性别：<input name="sex" type="radio" value="male" checked>男
    <input name="sex" type="radio" value="female">女
    <br>
    爱好：<input name="hobby" type="checkbox" value="shopping">购物
    <input type="checkbox" name="hobby" value="java" checked>Java
    <input type="checkbox" name="hobby" value="game" checked>游戏
    <br>
    图片：<input type="file" name="pic">
    <br>
    生日:<input type="date" name="birthday">
    <br>
    邮箱：<input type="email" name="email">
    <br>
    省份：<select name="province">
    <option>---请选择一个省份--</option>
    <option>浙江</option>
    <option>上海</option>
    <option>江苏</option>
    </select>
    <br>
    自我描述： <br>
    <textarea cols="50" rows="5" name="dec" placeholder="请输入自我描述"></textarea>
    <input type="submit" value="login">
    <input type="button" value="button">
    <input type="image" src="../images/collection_icon.jpg">

</form>
</body>

样式截图

html5中include标签 html5th标签_java