html基础——快速了解html基本标签

最新推荐文章于 2023-04-02 14:32:57 发布

学也学不会，会也学不完

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量165

点赞数

文章标签： html基础

本文链接：https://blog.csdn.net/weixin_44252609/article/details/102462022

版权

html文件结构介绍

<!DOCTYPE html> /*申明文件类型，告诉浏览器文件类型*/
<html lang="en"> /*最大标签，所有内容都在这里 lang属性是语言, en 表示英语*/
<head> /*头文件，主要写网页的配置信息*/
<meta charset="UTF-8"> /*申明编码类型/
<title>这将是一个页面</title> /*网页标题*/
</head>
<body>/*页面主体*/

</body>
</html>

标签的介绍
(1) 标题标签：h1-h6
共六级标题，作用：加粗加大
需注意：一个页面h1只能出现一次，h2-h6可重复出现
(2) p标签：段落标签
段落和段落之间有间距，自动换行
(3) 转义字符：
&nbsp 表示空格
&gt, &lt 大于号，小于号
&copy 表示©
(4) 一条直线：hr
(5) 斜体标签：i/em
区别：em 强调斜体，方便搜索引擎查找
(6) 加粗标签：b/strong
区别：强调加粗，方便搜索引擎查找
(7) u标签：下划线标签
(8) img标签：图片标签
属性：src=“图片路径”
(9) 列表标签:
ul无序列表
属性：type=" " (类型主要有：square(方形)，circle(空心圆点)，disc(实心圆点))
ol有序列表
属性：type=" “(类型有：数字，大小写字母，阿拉伯数字 I)
start:开始位置
dl自定义列表
dt:标题标签， dd 存放列表内容
(10) a标签：超链接标签
属性：href=” " 放链接
target 页面打开方式默认在当前页面打开
(11) table标签：表格标签，申明一个表格
属性：
border 边框
cellspacing：设置格与格之间的间距
cellpadding：设置表格中内容距离，当前表格边框之间的距离
tr：申明一行
td/th：声明一列，th表头，td单元格
align: 水平对齐，默认靠左
valign：垂直对齐，默认居中
单元格合并：
跨行合并：rowspan : 设置当前列占几个行的高度
跨列合并：colspan：设置当前列占几个列的高度
(12) form: 申明一个表单域
属性:
action：提交地址，如果不写提交到当前页面
method：指定提交数据的方式 get(默认)， post
表单控件的属性：
name：必须添加，用于提交数据的key
value：代表值
type：指定控件类型,例如：text(普通文本框)，password(密码框)，sumbit(提交按钮)

小练习：使用html完成一个个人简历模板

<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
<title>这是一个简历</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<table border="2px" cellspacing="0px" cellpadding="0px" style="width: 800px; height: 950px" align="center">
    <tr align="center">
        <td style="width: 60px; height: 35px">姓名</td>
        <td style="width: 60px; height: 35px"> </td>
        <td style="width: 60px; height: 35px">性别</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">民族</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">政治面貌</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">户籍</td>
        <td style="width: 60px; height: 35px" colspan="3"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">出生年月</td>
        <td style="width: 60px; height: 35px"> </td>
        <td style="width: 60px; height: 35px">婚姻状况</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">工作时间</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">技术职称</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">文化程度</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">主修时间</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">毕业学校</td>
        <td style="width: 60px; height: 35px" colspan="3">南京大学</td>
        <td style="width: 60px; height: 35px">毕业时间</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">英语水平</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">计算机水平</td>
        <td style="width: 60px; height: 35px"></td>
        <td style="width: 60px; height: 35px">薪金要求</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td rowspan="2">本人要求</td>
        <td style="width: 60px; height: 35px">现从事工作</td>
        <td style="width: 60px; height: 35px" colspan="4"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">欲从事工作</td>
        <td style="width: 60px; height: 35px" colspan="4"></td>
    </tr>
    <tr align="center">
        <td rowspan="2">联系方式</td>
        <td style="width: 60px; height: 35px">联系电话</td>
        <td style="width: 60px; height: 35px" colspan="2"></td>
        <td style="width: 60px; height: 35px">邮政编码</td>
        <td style="width: 60px; height: 35px"></td>
    </tr>
    <tr align="center">
        <td style="width: 60px; height: 35px">通信地址</td>
        <td style="width: 60px; height: 35px" colspan="4"></td>
    </tr>
    <tr align="center">
        <td>工作简历</td>
        <td colspan="5"></td>
    </tr>
    <tr align="center">
        <td>自我评价</td>
        <td colspan="5"></td>
    </tr>
</table>
</body>
</html>

结果：
运行结果

学也学不会，会也学不完

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础——快速了解html基本标签

html文件结构介绍<!DOCTYPE html> /*申明文件类型，告诉浏览器文件类型*/<html lang="en"> /*最大标签，所有内容都在这里 lang属性是语言, en 表示英语*/<head> /*头文件，主要写网页的配置信息*/<meta charset="UTF-8"> /*申明编码类型/<title>...
复制链接

扫一扫