前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)
一丶HTML块级标签
排版标签
p 标签: 段落标签,会自动在段落上下加上空白来分开
p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签
div 标签: 没有样式的标签 ,最常用
列表
1.无序列表 常用
2.有序列表
3.标题列表
# 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片
<ul type='circle'>
<li>1</li>
<li>2</li>
</ul>
<ul type='square'>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>
# 有序列表 ol ,type:阿拉伯数字和英文字母. start :从第几个开始
<ol type='1' start='2'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
# 标题列表
<dl>
<dt>标题</dt> <!-- dt 表示标题 -->
<dd>1</dd> <!-- dd 内容 -->
<dd>2</dd>
<dd>3</dd>
</dl>
表格
table 表格:
thead :表头
tr: 一行
th: 一列 , 加粗的单元格。相当于<td> + <b>
<caption>：表格的标题。使用时和tr标签并列
tbody: 表身
tr:一行
td:一列
表格属性:
width : 宽度
height: 高度
bordercolor: 边框颜色
border : 边框
align :表格的水平对齐方式
bgcolor : 背景颜色
background : 背景图片
cellspacing :单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
cellpadding :单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意:注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
合并单元格:
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
tr属性:
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
td属性:
align：内容的横向对齐方式。属性值可以填：left right center。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
具体代码如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table 表格:
thead :表头
tr: 一行
th: 一列 , 加粗的单元格。相当于<td> + <b>
<caption>：表格的标题。使用时和tr标签并列
tbody: 表身
tr:一行
td:一列
表格属性:
width : 宽度
height: 高度
bordercolor: 边框颜色
border : 边框
align :表格的水平对齐方式
bgcolor : 背景颜色
background : 背景图片
cellspacing :单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
cellpadding :单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意:注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
合并单元格:
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
tr属性:
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
td属性:
align：内容的横向对齐方式。属性值可以填：left right center。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。
-->
<table background="http://p1.music.126.net/l75oqBhEUdxcuEnX4oe-mw==/109951164276097647.jpg" border="1" bordercolor="red" align="center" width="200px" height="200px" cellpadding="10px" cellspacing="5px" bgcolor="#6495ed">
<!-- ：表格的标题。使用时和tr标签并列-->
<caption>这里是表格的标题哦~~</caption>
<thead>
<tr valign="bottom" height="200px" align="center" bgcolor="#6495ed" dir="rtl">
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<thbody>
<tr>
<td align="left" valign="bottom" width="200px"bgcolor="#b22222" >1</td>
<!-- 行合并 -->
<td colspan="2">2</td>
</tr>
<tr>
<!-- 列合并 -->
<td rowspan="2">一</td>
<td>二</td>
<td>三</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</thbody>
</table>
</body>
</html>
form表单
### input 框 全家桶
text 单行输入文本
password 密码输入框（不显示明文）
radio 单选框 (name属性相同:则是互斥效果)
checkbox 复选框
email 邮箱框
date 日期输入框 ,年月日
datetime-local 日期输入框, 年月日时分
file 文件
submit 提交按钮
reset 重置按钮
hidden 隐藏文本框
### 常用的属性
id : id值
name :属性设置值,
value :属性设置值 ,
readonly : 只读并可提交,
disabled : 只显示不可提交 ,
size="50" : 表示文本框内可以显示五十个字符。
placeholder : 背景提示
checked : 默认选择状态
title : 鼠标悬浮
for : 绑定id
具体代码如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- form 的属性:
name：表单的名称，用于JS来操作或控制表单时使用；
id：表单的名称，用于JS来操作或控制表单时使用；
action: 提交数据到哪个url
method: 以哪种方式提交数据,一般取值：get(默认)和post
enctype: 提交文件或者提交大数据使用到 enctype
表单数据的编码方式(加密方式)，取值可以是：
application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
Multipart/form-data：上传附件时，必须使用这种编码方式.
-->
<form action="http://127.0.0.1:9999" method="get" enctype="application/x-www-form-urlencoded">
<!-- input 框 全家桶
text 单行输入文本
password 密码输入框（不显示明文）
radio 单选框 (name属性相同:则是互斥效果)
checkbox 复选框
email 邮箱框
date 日期输入框 ,年月日
datetime-local 日期输入框, 年月日时分
file 文件
submit 提交按钮
reset 重置按钮
hidden 隐藏文本框
-->
<!-- 前端页面以键值对字典的形式提交数据 , name属性的值作为字典的键 , value属性的值作为字典的值. 一一对应 -->
<!--
id : id值
name属性设置值,
value属性设置值 ,
readonly 只读并可提交,
disabled只显示不可提交 ,
size="50"表示文本框内可以显示五十个字符。
placeholder 背景提示
checked 默认选择状态
title 鼠标悬浮
for 绑定id
-->
<input type="text" name="user" placeholder="背景提示" size="20" > <br />
<!-- 密码框,输入内容不可见 -->
<input type="password" name="password" > <br />
<!-- 邮箱输入框 disabled -->
<input type="email" value="mahuateng@qq.com" name="email" disabled> <br />
<!-- radio name属性则互斥 checked 默认选择状态 -->
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
<br />
<!-- 多选框 checked 默认选择状态 -->
<input type="checkbox" name="hobby" value="1" checked>唱
<input type="checkbox" name="hobby" value="2" >跳
<input type="checkbox" name="hobby" value="3" >rap
<br />
<!-- -->
<input type="date" name="date">
<input type="datetime-local" name="datetime">
<br />
<!-- 文件提交: 需要在表单设置 enctype属性 -->
<input type="file" name="files" >
<br />
<br />
<!-- 四大按钮类型 -->
<input type="submit" value="submit 提交按钮">
<input type="image" src="../day43%20%20%20HTML/imgs/1.jpg" value="图片按钮哦" title="图片按钮哦">
<input type="button" value="仅是按钮">
<input type="reset">
<!-- 在Form表单中与submit具有相同的功能 -->
<button>提交数据按钮</button>
</form>
</body>
</html>
排版标签
p:段落标签
div:没有样式的块级标签
代码如下:👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 块级标签不允许嵌套块级标签 -->
<!--错误示例:会形成两个p标签-->
<p>
123
<h1>1</h1>
</p>
<p align="left">
P内容0
</p>
<p align="center">
P内容1
</p>
<p align="right">
P内容2
</p>
<div align="left">
div内容3
</div>
<div align="center">
div内容4
</div>
<div align="right">
div内容5
</div>
<hr />
<center>123居中</center>
<!-- 将保留其中的所有空白字符(空格,换行符),原封不动的输出结果-->
<pre>
鹅鹅鹅
作者：李白
曲项向天歌
白毛浮绿水
</pre>
</body>
</html>
其他标签
select:下拉选择框
textarea:文本域
label:文本标签
代码如下:👇
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 单选 下拉选择框
name属性:提交的键
option---value:要提交的值
size : 一页显示多少条
selected : 选中状态
-->
<select name="city" id="c1" size="3">
<option value="bj" selected>北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
<option value="cq">重庆</option>
<option value="cc">长春</option>
</select>
<!--多选下拉框
multiple : 表示可以多选
selected : 选中状态
name属性:提交的键
option---value:要提交的值
size : 一页显示多少条
-->
<select name="hobby" id="c2" size="3" multiple>
<option value="bj" selected>唱</option>
<option value="sh">跳</option>
<option value="tj" selected>rap</option>
<option value="cq">篮球</option>
<option value="cc">🏀</option>
</select>
<br />
<!--lable:
for属性,点击lable中的内容,让for标示的id对应的元素获得焦点
-->
<label for="cxk">姓名:</label>
<input type="text" name="alex" id="cxk" >
<!-- 文本域
value：提交给服务器的值。
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。
-->
<textarea name="ct" id="ct" cols="30" rows="10" readonly>
短时空间的
</textarea>
<!--表单的语义化 很少在使用了-->
<form >
<fieldset>
<legend>账号信息</legend>
<lable for="e">姓名:</lable>
<label for="c122"></label>
<input type="text" id="c122" placeholder="请输入内容">
</fieldset>
</form>
</body>
</html>
