【前端】1、HTML-CSDN博客

本文链接：https://blog.csdn.net/qq_56040271/article/details/141002000

1. HTML

1.1 HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>
<body>
    这是内容部分！
</body>
</html>

1.2 常用的排版标签

1.2.1 块状标签

1.2.1.1 p 标签

段落标签，常用属性：
align：文字相对于浏览器的水平对齐方式，可以取值：
left：左对齐，默认值。
center：居中对齐。
right：右对齐。

<p align="left">这是第一个段落</p>
<p align="center">这是第二个段落</p>
<p align="right">这是第三个段落</p>

1.2.1.2 ol 标签和 ul 标签

有序列表 ol ，可以使用type属性表达顺序，可取值如下：
1、1: 默认值，以数字表达的顺序。
2、a：以小写字母表达的顺序。
3、A：以大写字母表达的顺序。
4、i：以小写的罗马字母表达的顺序。
5、I：以大写的罗马字母表达的顺序。

<ol type="1">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
<ol type="a">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
<ol type="A">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
<ol type="i">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>
<ol type="I">
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
</ol>

无序列表 ul ，可以使用type属性表达顺序，可取值如下：
1、desc: 默认值，以实心小圆点表示的顺序。
2、square：以实心的小正方块表达的顺序。
3、circle: 以空心的小圆圈表达的顺序。

<ul type="desc">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
</ul>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
</ul>
<ul type="circle">
    <li>苹果</li>
    <li>香蕉</li>
    <li>桔子</li>
</ul>

1.2.1.3 h 标题

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

1.2.1.4 hr 标签

水平线标签，可以取值：
1、color: 水平线的颜色。
2、size: 水平线的高度。
3、align：水平线的水平对齐方式，可取值：left/center/right: 默认值为center。
4、width：水平线的宽度。

<hr color="red" />
<hr color="blue" size="10" width="600px" />
<hr color="red" size="15" width="400px" align="left" />

1.2.2 行内标签

1.2.2.1 font 标签

字体标签，可以取值如下：
1、color：代表字体颜色：
① 可以使用颜色名称表示，如：red,green,blue,purple,orange,yellow…
② 可以使用十六进制表示：RRGGBB，每一种颜色范围：00-ff，如：红色：#ff0000
2、size：字体大小，默认为值为3，最大值为7，可以使用绝对长度或相对长度。
3、face：字体的名称，必须是电脑上安装的字体。

<font color="#ffaacc" size="+4" face="方正粗黑宋简体">这是字体</font>

1.2.2.2 img 标签

图片标签，常用属性：
1、src: 图片路径
2、width：图片的宽度
3、title: 代表鼠标移到图片上时的提示文本

<img src="images/1.png" title="图片1" width="200" />

1.2.2.3 a 标签

超链接标签，常用属性：
1、href：代表要跳转到的位置。
2、target：指定链接打开的位置。常用的值有：
① _self 当前窗口或框架打开，默认值
② _blank 在新窗口或标签页打开

<!--4.1 文字超链接-->
<a href="http://baidu.com">到百度</a> <br />
<a href="http://baidu.com" target="_blank">到百度</a> <br />
<!--4.2 图片链接-->
<a href="http://sina.com.cn">
    <img src="images/sina.png" title="aa" />
</a>

1.2.3 其他标签

1、sub：下标
2、sup：上标
3、s：删除线
4、i：倾斜
5、b：加粗
6、br: 换行

<h1>H<sub>2</sub>O</h1>
<h1>x<sup>2</sup>Y<sup>3</sup></h1>
原价：￥<i>21.34</i> <br>
<b>现价</b>：<s>￥10</s>

1.3 HTML表格标签

table表格的常用属性如下：
1、border：表格的边框
2、cellspacing：表格的边框间的间距
3、cellpadding：表格文字与边框之间的间距
4、bordercolor：边框的颜色
5、background：表格的背景图片
6、bgcolor：表格的背景颜色
7、rules：是否显示表格的水平线或垂直线，可取值：
rows：代表显示水平线
cols：代表显示垂直线
8、width、height：表格的宽度、高度
9、slign：表格相对于浏览器的水平对齐方式。可取值：left\center\right

tr: 代表表格的行，常用属性：
1、bgcolor：这一行的背景颜色
2、background：这一行的背景图片

td: 代表某一行的某个单元格，可取值：
1、rowspan：代表合并行，向下合并，要将合并后的行删除
2、colspan：代表合并列，向右合并，要将合并后的列删除
3、valign: 代表此单元格在垂直方向的对齐方式，可取值：
top: 顶部对齐
middle: 垂直居中,默认值
bottom：底层对齐

<table border="1" cellspacing="0"
       width="500" align="center" cellpadding="20"
       bgcolor="blue" background="img\2.png"
        bordercolor="blue">
    <tr align="center">
        <td colspan="4"><font color="red" >学生信息</font></td>
    </tr>
    <tr align="center" bgcolor="aqua">
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>住址</td>
    </tr>
    <tr align="center">
        <td>1001</td>
        <td>张三</td>
        <td>21</td>
        <td rowspan="2" valign="middle">上海</td>
    </tr>
    <tr align="center">
        <td>1002</td>
        <td>李四</td>
        <td>20</td>
    </tr>
</table>

1.4 表单标签的用法

form：代表表单控件，常用属性如下：
1、action：提交到后台的地址
2、method：可取值get、post，区别如下：
get：以文明的方式将提交的数据绑定到url地址后面，所以数据不安全，受地址栏内容长度不能超过1024字节限制，提交的数据大小有限制。
post：以请求体的方式提交数据到后端，所以，比较安全，也不受大小的限制，并且可以进行文件上传。
3、name：表单的名字

在表单中一共有12个表单元素控件，分别如下：
① 基本控件：（6个）

type="text": 代表文本框
type="password": 代表密码框
type="radio": 代表单选按钮，其中的name属性取值必须一致，否则，不能产生互斥性。如果想让某个单选按钮默认被选中，可以使用checked属性。
type="checkbox": 代表复选框，其中的name属性也要取值一致，提交的数据到后台是一个数组。如果想让某个单选按钮默认被选中，可以使用checked属性。
type="file":  代表文件上传控件
type="hidden": 代表表单隐藏域控件，可以在后台与表单之间传递数据，不显示数据。

② 高级控件：（2个）

select: 下拉式列表框,其下有很多个option选项,其中有一些常用属性如下：
	1、multiple: 代表是否可以多选
	2、size：显示出来选项的个数，默认为1
	如果想让某个option默认被选中，请使用selected属性，而不是checked属性
textarea：代表文本域控件（多行文本框），可取属性：
	1、cols: 代表水平显示的字数（列数）
	2、rows：代表行数（垂直显示行数）

③ 按钮控件：（4个）

type="submit": 代表提交按钮，可以将数据提交给后台。
type="button": 代表普通按钮，主要用于与js交互。
type="reset": 代表重置按钮，可以将输入的内容恢复到原始状态
type="image": 代表图片按钮，也可以提交表单，提交时还会提交自己图片坐标，格式为：name名字.x和name名字.y坐标。

<form action="a.jsp" method="get" name="form1">
    <input type="hidden" name="uid" value="100">
    <table border="1" cellspacing="0" bordercolor="lightgray">
        <tr>
            <td>姓名：</td>
            <td>
                <input typ bore="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="男" checked="checked">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="habby" value="游泳">游泳
                <input type="checkbox" name="habby" value="打牌">打牌
                <input type="checkbox" name="habby" value="游戏" checked>游戏
                <input type="checkbox" name="habby" value="下棋">下棋
                <input type="checkbox" name="habby" value="打球">打球
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <td>
                <select name="education" multiple size="3">
                    <option value="大专">大专</option>
                    <option value="本科">本科</option>
                    <option value="硕士" selected>硕士</option>
                    <option value="博士">博士</option>
                    <option value="博士后">博士后</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <input type="file" name="photo" id="">
            </td>
        </tr>
        <tr>
            <td>个人简介：</td>
            <td>
                <textarea name="intro" cols="50" rows="10">
                    我的第一份工作是......
                    我的第二份工作是......
                    我的第三份工作是......
                    我的第四份工作是......
                </textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="提交按钮">
                <input type="button" value="普通按钮" onclick="alert('当前时间：' + new Date().toLocaleString())">
                <input type="reset" value="重置按钮">
                <input type="image" src="img\6.png" width="50" value="图片按钮" name="aa">
            </td>
        </tr>
    </table>
</form>