HTML 认识

一、什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language）
超文本：超：超链接包含超链接的文本
标记语言：
标记：标签
语言：制作网页的语言
一个网页是有多个标签组成的
HTML是用来描述网页的一种语言

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>我的第一个网页</title>
</head>
<body><h1>啦啦啦</h1>&lt;love&gt; <!--尖括号-->
</body>
</html>

1、标签、元素

HTML标签是由尖括号包围的关键词，比如 <html>
HTML标签通常是成对出现的，比如<b>和</b>
标签正规使用小写

2、HTML基本结构

html是由浏览器来解析，所以不需要安装任何编译环境
Html文档的基本结构：
<!DOCTYPE html> 声明文档
<html> 是网页当中最大的标签，所有内容都要写在此标签内
<head> header头主要用于书写网页的设置一般写不直接显示给用的内容
字符编码的设置
网页的标题
引入外部的css文件
引入外部的JavaScript 文件
Body: body体，网页的身体部分网页中只要是显示给用户的内容，都要写在此标签

Head,和body 都是html的子标签

Html标签类型分类：
双标签：<标签名></标签名> / <开始标签>内容</结束标签>
单标签 <标签名 /> 一般写成<标签名>

Html标签的属性：
一般是键值对 key=”value”
属性的值必须使用双引号引起来

Html不会报错所以注意双标签不要忘了闭合
Html标签不区分大小写规范要求都是用小写

3、Html使用标签

1、h1-h6 标题标签

双标签有默认样式字体变粗变大变黑会自动换行

一般一个页面中h1只使用一次 h2-h6可以重复使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题标签</title></head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><h7>我是七级标题</h7></body>
</html>

2、p 段落标签

双标签有默认的样式会自动换行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>段落标签</title></head><!-- 吟诗一首 --><h3>静夜思</h3><p>窗前明月光，<br>疑似地上霜。<br>举头望明月，<br>低头思故乡。</p></body>
</html>

3、常见的实体字符

& nbsp; 空格
& gt; 大于号
& lt; 小于号
& copy; 版权标志

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实体标签</title></head>&lt;l&nbsp;&nbsp;ove&gt; &copy;</body>
</html>

4、i 标签 b标签 em 标签 strong标签 u标签

i标签单纯的字体斜体
Em 也是斜体只不过具有强调意义
B 加粗
String 加粗具有强调意义
U 下划线
以上都是双标签

5、br hr

都是单标签
Br 强制换行
Hr 水平线

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实体标签</title></head><h1><u>背影</u></h1><p>我与父亲不相见已二年余了，我最不能忘记的是他的<strong>背影</strong>。</p><p>那年冬天，<i>祖母</i>死了，<em>父亲</em>的差使1也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧2回家。到徐州见着父亲，看见满院狼藉3的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”回家变卖典质4，父亲还了亏空；又借钱办了丧事。这些日子，家中光景5很是惨澹，一半为了丧事，一半为了父亲赋闲6。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p></body>
</html>

6、img 图片标签

单标签
属性：
src 图片的地址
title 鼠标移入的提示信息
alt 图片加载失败时的替代内容
可以使用网络图片或者本地的图片
使用的是本地的图片资源
相对路：相对于当前文件来去查找指定的资源
./ 代表当前路径
. ./ 代表上一级路径
windows下根目录根目录一般是盘符:
注意加载图片时盘符前面加/
Linux下的根目录用/ 来表示

绝对路径: 不考虑当前文件的位置，从根目录去查找指定的资源
推荐使用相对路径

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片标签</title></head><body><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565590576334&di=478ea04cde2911f35712f2f4dc0f9161&imgtype=0&src=http%3A%2F%2Fimg.haote.com%2Fupload%2Fnews%2F20180712%2F153137358034080.jpg" title="安排" alt="看不见我"><img src="./timg.jpg" title="朴灿烈" alt="没找到"><img src="D:\培训文档\第二阶段\day01\1.jpg" alt="没找到"></body>
</html>

7、列表标签

无序列表
ul: 声明一个无序列表
li: 列表项
type(了解): 默认disc 圆
square 方块
circle 空心圆

ul中的直接子元素必须是li

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表标签</title></head><body><ul type="cilcle"><li>列表项1</li><li><h1>我是标题</h1></li><li>列表项2</li><li>列表项3</li></ul></body>
</html>

有序列表
ol:声明一个有序列表
li: 列表项
type:
1 代表数字默认就是数字
a 代表小写字母
A 代表大写字母
i 小写的罗马数字
I 大写的罗马数字
start: 指定以第几个开始只能写数字

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表标签</title></head><ol><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li></ol></body>
</html>

自定义列表
dl:声明一个自定义列表
dt:列表的标题
dd:列表描述项

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表标签</title></head><dl><dt>我是第一个</dt><dd>我是第一的说明</dd><dd>我也是第一的说明</dd><dt>我是第二</dt><dd>我是第二的说明</dd><dd>我也是第二的说明</dd></dl></body>
</html>

8、a 标签超链接

超连接a 双标签
页面跳转
href: 跳转的地址
如果不给值跳转当前页面
target:_blank 新打开一个窗口加载跳转后的页面

跳转到当前页面的指定位置锚点
给指定标签添加id属性
a标签的href属性的值为#指定元素id属性的值
跳转到本地html文件的指定位置
a标签的href属性的值为指定页面中标签的id的值

<!DOCTYPE html>
<html><head><title>超链接</title></head><body><a href="http://www.baidu.com" target="_blank" title="点一下">点我跳转百度</a><a href="#item1" id="top">跳转到一楼</a><a href="#item2">跳转到二楼</a><a href="#item3">跳转到三楼</a><a href="#item4">跳转到四楼</a><a href="#item5">跳转到五楼</a><p id="item1" style="height: 500px; background-color: pink">一楼</p><p id="item2" style="height: 700px; background-color: red">二楼</p><p id="item3" style="height: 800px; background-color: green">三楼</p><p id="item4" style="height: 600px; background-color: blue">四楼</p><p id="item5" style="height: 400px; background-color: yellow">五楼<a href="#top">返回顶部</a></p></body>
</html>

9、表格标签

table: 声明一个表格
border: 边框
cellspacing: 设置表格和表格之间的间距 **
cellpadding: 设置表格中内容距离当前表格边框之间的间距
tr: 声明一个行
td/th: 声明一个列

水平对齐方式：align **
align:默认靠左对其 left
center 居中
right 靠右对齐
如果给tr设置设置当前行的所有
如果给td/th 设置当前一列
valign: 默认垂直居中 **
top:靠上对其
bottom:靠下对其
单元格合并： **
跨行合并
rowspan: 设置当前列占几个行的高度
跨列合并
colspan: 设置当前列占几个列的宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="20" width="300"><!-- 第一行 --><tr align="center"><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td><td>啦啦</td><td>嘿嘿</td></tr><!-- 第二行 --><tr><td>1</td><td>张三</td><td rowspan="2">男</td><td>20</td><td colspan="2">哈哈哈哈</td><!-- <td>嘿嘿嘿</td> --></tr><tr><td>2</td><td>李四</td><!-- <td>男</td> --><td>18</td><td>哈哈哈哈</td><td>嘿嘿嘿</td></tr></table>
</body>
</html>

10、form ：声明一个表单域

属性：
action:提交地址如果不写，提交到当前页面
method: 指定提交数据的方式
get: 默认是get提交
将数据明文显示在地址栏相对不太安全
数据大小受浏览器限制
post:
不会将数据明文显示在地址栏相对安全
理论上数据大小不受限制表单的数据是要提交给后台，提交数据的格式一般是键值对
Uname=用户在用户名框输入的内容所以表单控件除了按钮都要加name属性

表单控件的属性：
name: 必须添加座位提交数据的key
value: 代表值
type: 指定你的控件类型
text 普通文本输入框
password 密码输入框
radio 单选框
同一组单选框的name属性的值必须相同
必须设置默认值 value属性
checkbox: 多选框
同一组多选框的name属性的值必须相同
必须设置默认值 value属性
select>option: 下拉选框 option 选项
select 必须添加name属性
option 必须设置value
textarea:
文本域/多行文本输入框双标签
hidden: 隐藏域
有些时候有些数据不希望用户看到和修改所以可以使用隐藏域
提交按钮： type=“submit”
按钮
单纯的按钮：
在form 表单域中 type=“button” 只是单纯的按钮没有提交意义
checked 设置单选框和多选框的默认选中状态
selected 设置下拉选框的默认选中状态给option设置
disabled 禁用

了解： type=“reset” 重置按钮
type=“image” 图片按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form action="./1.py" method="post">用户名：<input type="text" name="uname" value="哈哈"><br>密码：<input type="password" name="pwd"><br>性别：<input type="radio" name="gender" value="1" checked> 男<input type="radio" name="gender" value="0"> 女<br>爱好：<input type="checkbox" name="like" checked>篮球<input type="checkbox" name="like">足球<input type="checkbox" name="like">乒乓球<br>地址：<select name="address"><option value="0">--请选择地址--</option><option value="1">北京</option><option value="2" selected>上海</option></select><br>自我介绍：<textarea name="info">我是...</textarea><br>小秘密：<input type="hidden" name="uid" value="110"><br>按钮：<input type="submit" name="提交1" disabled><button>提交2</button>单纯的按钮：<input type="button" name="按钮"><br>重置按钮：<input type="reset" value="重置"><br>图片按钮：<input type="image" src="./1.jpg" name=""></form>
</body>
</html>

按照标签效果分类：
块标签：
会自动换行(独占一行)
h1-h6 p ul li ol dl dt dd table tr

行标签：
不会自动换行，标签和标签并排在一行显示,没有宽高属性
I b u em strong
行内块：
不会自动换行，标签和标签并排在一行显示，可以设置宽高
Img input

没有默认样式的快标签和行标签
div 块标签没有默认样式一般配合css做网页的布局
Span 行内标签，没有默认样式一般也是配合css去使用

作业：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title>
</head>
<body><table border="1" cellspacing="0" cellpadding="20" width="600" height='80'><tr><td colspan="3" align="center">注册</td><!-- <td></td><td></td> --></tr><tr><td>用户名：</td><td colspan="2"> <input type="text" name="username" value="请输入用户名"></td></tr><tr><td>密码：</td><td colspan="2"> <input type="password" name="pwd"></td></tr><tr><td>性别：</td><td colspan="2"> <input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" checked>保密</td></tr><tr><td>爱好：</td><td colspan="2"> <input type="checkbox" name="like">唱歌<input type="checkbox" name="like">跳舞<input type="checkbox" name="like">运动<input type="checkbox" name="like">敲代码</td></tr><tr><td>地址：</td><td colspan="2"><select name="address"><option>北京市，五方桥</option><option>河北省，邯郸市</option></select></td></tr><tr><td>头像：</td><td colspan="2"><input type="file" name="img"></td></tr><tr><td>个人简介：</td><td colspan="2"><textarea name="info"></textarea></td></tr><tr><td colspan="3" align="center"><input type="submit" name="提交"></td></tr></table>
</body>
</html>

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

Web--html认识、标签、基本结构相关推荐

Web前端如何进行SEO结构优化
做前端的肯定离不开SEO,无论您是专职的SEOer还是其他什么别的,只要设计到前端就避不开SEO,前前后后做了几十个网站和个人博客网站建设的我,对与SEO仍然出于小白阶段,下面就介绍一下日常SEO注意 ...
web.xml 常用标签配置（转）
2019独角兽企业重金招聘Python工程师标准>>> 1.Web.xml作用: 每一个javaWeb工程都有一个web.xml配置文件,web.xml文件是用来初始化工程配置信息的 ...
[导入]基于Web的B／S结构实时监控系统[转]
文章编号:1009-0193(2002)01-0062-02 基于Web的B/S结构实时监控系统尉学军,刘跃 (贵州工业大学电气工程学院,贵州贵阳 550003) 摘要:提出了怎样利用Web ...
web html常用标签含义,WEB前端开发之HTML：常用标签知多少
今天来介绍一下html常用标签基本结构标题元素 ● ~ 标签用于定义标题其中的重要性最高,而的重要性最低.(权重) ● 标签通常用于最顶层的标题. ●一个html文档之中一般只有一个标题 ...
HTML基础（web到HTML标签）
HTML基础(web到HTML标签) 一.认识WEB 「网页」主要是由文字.图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频.视频以及Flash等. 「浏览器」是网页显示.运行的平台. ...
Web前端体系的脉络结构
Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
java web开发常用标签
struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...
java将xml中的标签名称转为小写_深入学习Java Web(七): JSTL标签库
本文转自与博客园一杯凉茶的博客. 在之前我们学过在JSP页面上为了不使用脚本,所以我们有了JSP内置的行为.行为只能提供一小部分的功能,大多数的时候还是会用java脚本,接着就使用了EL表达式,基本上 ...
java web 有哪些标签库_java web中jsp常用标签
在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库:1 ...
Web——HTML常见标签及用法
目录 1.认识HTML标签 2.HTML文件基本结构 3.HTML常见标签 3.1注释标签 3.2标题标签:h1~h6 3.3段落标签:p 3.4换行标签:br 3.5格式化标签 3.6图片标签:im ...

Web--html认识、标签、基本结构

HTML 认识

一、什么是HTML

1、标签、元素

2、HTML基本结构

3、Html使用标签

1、h1-h6 标题标签

2、p 段落标签

3、常见的实体字符

4、i 标签 b标签 em 标签 strong标签 u标签

5、br hr

6、img 图片标签

7、列表标签

8、a 标签超链接

9、表格标签

10、form ：声明一个表单域

Web--html认识、标签、基本结构相关推荐

最新文章

热门文章

Web--html认识、标签、基本结构

HTML 认识

一、什么是HTML

1、标签、元素

2、HTML基本结构

3、Html使用 标签

1、h1-h6 标题标签

2、p 段落标签

3、常见的实体字符

4、i 标签 b标签 em 标签 strong标签 u标签

5、br hr

6、img 图片标签

7、列表标签

8、a 标签超链接

9、表格标签

10、form ：声明一个表单域

Web--html认识、标签、基本结构相关推荐

最新文章

热门文章

3、Html使用标签