HTML总结部分-CSDN博客

本文链接：https://blog.csdn.net/nbdjdjjd/article/details/135838976

1.组成部分：首先是声明HTML的文档，其次是网页的开始、网页的头部开始、网页的标题，最后是网页头部的结束，网页内容的开始，网页内容的结束和网页的结束。（注意：HTML的标签都是成对出现的）

<!DOCTYPE html> ------- 声明一个html的文档
<html lang="en"> ------- 网页的开始
<head> -------- 网页的头部 的开始
<meta charset="UTF-8">------不能变动
<meta name="viewport" content="width=device-width, initial-scale=1.0">-----不能变动
<title>Document</title> ------ 网页的标题
</head> ------ 网页头部的结束
<body> ------ 网页内容的开始
</body> ------- 网页内容的结束
</html> ------ 网页的结束

2.应用字体的一些常用标签：粗体：标签，标签，斜体标签，下划线标签，<del>删除线标签

3：标签段落标签， 换行标签

4：标签：上标标签（例如：二的三次方：23 注意：标签成对出现）

5: 标签：下标标签（例如：前n项之和：a1+a2+....an

6:<pre>原样输出内容，格式不会改变

7：<hn>标题标签指的是h1,h2,h3,h4,h5,h6随着 n的取值只能是1-6 字体会越来越小有加粗的效果

8：<div>标签：可以将一个页面分割成横向或者纵向的几个部分

行内标签：不能自动换行，除非这一行内容铺满整个页面才会换行

块级标签：自动换行，独占一行 <div> <hn> <h>r

9：一般常用特殊字符的打印方法:

10： form 标签一般会和 input 标签连用

action 属性：跳转的路径

路径：

绝对路径：从盘符开始到文件为止的一个路径

相对路径：源文件相对于目标文件的相对路径

method 属性：用来明确表单提交的方式 get post , 默认值是 get

name 属性：表单的名称

get 请求：不是特别安全，会把用户信息暴露在地址栏

11：表单的元素

type 的取值：

text ：文本框

password ：密码框

submit：提交按钮

radio：单选按钮

checkbox ：多选按钮

reset : 重置按钮

button : 普通按钮

image : 图像按钮

file: 文件

hidden: 隐藏域

email: 邮箱域

color: 颜色域

date : 日期

time: 时间

datetime-local: 日期 + 时间

range: 进度条

readonly ：只读字段只可以读不能修改

checked：默认选择

disabled ：表示禁用不可以点击

autofocus：默认光标的位置

required：不能空白提交

下拉列表框：一般和 option 标签连用

属性： selected ：认被选中的选项

multiple：以列表的形式展示

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单应用</title>
</head>
<body align="center" bgcolor="#E3DDDD">
    <h2>用户注册</h2>
    <form action="">
        <p>
            用户名：<input type="text">
            </p>
            <p>
             <p >&nbsp;密码：<input type="password" autofocus>
            </p>
            <p>
                请选择您的性别<input type="radio" name="genser" checked>男
                <input type="radio" name="genser">女
            </p>
            <p>
                请选择您的爱好：<input type="checkbox" name="nihao">足球
                <input type="checkbox" name="nihao">篮球
                <input type="checkbox" name="nihao">LOL
                <input type="checkbox" name="nihao">韩剧
                <input type="checkbox" name="nihao">王者荣耀
                </p>
                <p>
                    邮箱：<input type="email" readonly value="请输入您的邮箱">
                    </p>
                <p>
用户头像：<input type="file"><input type="hidden" value="1234567">
</p>
<p>
你的家庭地址是：<select name="" id=-"" >
    <option value="">永川</option>
    <option value="">江北</option>
    <option value="">万州</option>
</select>
</p>
<p>
    你的收货地址是：<select name=""" id=-"" multiple>
        <option value="">永川</option>
        <option value="">江北</option>
        <option value="">万州</option>
    </select>
    </p>
<p>
请留下您的建议或意见：<textarea cos="30" rows="10"></textarea>
</p>
<input type="submit"><input type="reset">
</p>请选择您喜欢的颜色:<input type="color">注册的时间<input type="datetime-local">
            <input type="button" value="注册"><input type="reset">
</body>
</html>

运行结果如图所示：

12:img属性标签：

src ：图片的路径（绝对路径和相对路径）

alt ：代替图片文本的内容（图片的路径错误或者因为浏览器的原因打不开这个图，用一个词或者

一段话代替描述这个图片）

width：宽度

height：高度单位都是 px %

border ：边框默认值是 0

align ：位置（图片和文字的位置）

取值： top ：上对齐 middle：居中对齐 bottom ：下对齐（默认对齐） right ：右对齐

left ：左对齐

12：表格的使用：

bgcolor：背景颜色

background ：背景图片

align : 表示表格的位置 left ,center, right

cellpadding : 表示的是表格边距（表示单元格内元素距离单元格边框的距离）

cellspacing: 表示的是表格的间距（表示的是单元格和单元格之间的距离）

rowspan="n" :n 是一个整数，表示在单元格垂直方向去跨行（合并行)

colspan = "n":n 是一个整数，表示在单元格水平方向去跨列（合并列）

综合标签的代码如图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工商银行电子汇款单</title>
</head>
<body>
    <h2>工商银行电子汇款单</h2>
    <table border="1" cellspacing="0" width="1400" height="400">
        <tr>
            <td colspan="2" align="middle" ><h4>回单类型</h4></td>
            <td align="middle"><h4>网上转账汇款</h4></td>
            <td colspan="2" align="middle"><h4>指令序号</h4> </td>
            <td align="middle"><h4>213254135454</h4></td>
        </tr>
        <tr>
            <td rowspan="4"><h4>收 <br>款 <br>人</h4></td>
            <td>户名</td>
            <td>张三</td>
            <td rowspan="4"><h4>付 <br>款 <br>人</h4></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><h4>卡号</h4></td>
            <td>0000000001</td>
            <td><h4>卡号</h4></td>
            <td>0000000002</td>
            
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>  
        </tr>
        <tr>
            <td><h4>网点</h4></td>
            <td>工商江苏南京业务处理中心</td>
            <td><h4>网点</h4></td>
            <td>江苏徐州业务处理中心</td> 
        </tr>
        <tr>
            <td colspan="2"><h4>币种</h4></td>
            <td>人民币</td>
            <td colspan="2"><h4>钞汇标志</h4></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><h4>金额</h4></td>
            <td>1.00元</td>
            <td colspan="2"><h4>手续费</h4></td>
            <td>0.75元</td>
        </tr>
        <tr>
            <td><h4>合计</h4></td>
            <td>人明币（大写）：壹
            </td>
        </tr>
        <tr>
            <td colspan="2"><h4>交易时间</h4></td>
            <td>2017年6月01号</td>
            <td colspan="2"><h4>时间戳</h4></td>
            <td>2017-06-01-13.00.00.0000</td>
        </tr>
    </table>
   <p> 票据打印时间：2017-06-01 15:0:12 </p>
   <p><del>票据打印单位：苏徐州业务中心</del></p>
    操作员：大曾
</body>
</html>

代码运行结果如图：