1、HTML是什么
HTML：
Hyper Text Markup Language 超文本标记语言
超文本：
用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：
由标签构成的语言===》html，xml
html标签是内置好的
xml标签是我们可以自定义的
标记语言不是编程语言
1、新建文本文档，扩展名为点html2、编写跟标签<html></html>3、在根标签中编写<head></head>4、在head标签中，编写子标签<title></title>5、在根标签中编写<body></body>6、在<body>标签中编写文本~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<html><head><title>我是页面标题！</title></head><body>Hello,我是HTML!</body></html>
h5文档声明： <!DOCTYPE html>
必须在第一行，固定格式
标签：
要求正确嵌套，正确闭合，和xml一样
属性：
必须在开始标签中编写
文本：
必须在标签体中写文本内容
注释：
2、HTML怎么用
文件标签：
名称 说明<html> html文档跟标签<head> 头标签，用于指定html文档的一些属性，引入外部资源<title> 标题标签<body> 体标签<!DOCTYPE html> html5中定义该文档是html文档
标题标签：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>我是页面标题！！！</title></head><!--h1是最大的标题，h6是最小的标题--><body><h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body></html>
水平线标签：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><!--这就是一条水平线--><body><hr color = "red" /></body></html>属性名： 描述： 取值：color 颜色 单词或者RGB，6位16进制的颜色值size 大小 取值1~7width 宽度 数值px(默认是 px(像素))，数值%(占比相对于父元素的比例 (推荐形式))align 对齐方式 center：居中，left：左对齐，rigth：右对齐
段落和换行标签：
<body>就是一个简单的换行符：<br />双标签，一组双标签，代表一个段落，尾标签后换行<p>段落一</p><p>段落二</p></body>
超链接标签：
<body>从一张页面链接到另一张页面属性：href 指定访问资源的URL也可以写点点杠，代表上一级目录属性：target 规定在何处打开链接文档_self：当前窗口（默认）_blank：新开窗口<a href="www.baidu.com"></a>ps:只要出现 404 错误，说明url地址写错了</body>
图片标签：
<body>向网页内嵌入一幅图像必须属性：src 显示图片地址必须属性：alt 规定图像的替代文本非必须属性：width 设置图像的宽度（只设置一个，另一个会等比例进行调节）非必须属性：height 设置图像的高度非必须属性：title 设置图像额外显示的信息<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fatt.img.xiushuang.com%2Fallimg%2F180105%2F0222063105-0.jpg&refer=http%3A%2F%2Fatt.img.xiushuang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624534153&t=44472b3263c8a0e919f733e7f3290eea" /></body>
列表标签：
<ol>和<ul>可以定义标签列表，每个列表都有列表项<li>有序列表<ol>属性：type 值（1、A、a、I、i） 设置列表中的标记类型属性：start 值（number） 规定有序列表的开始值<!--有序列表 ol-->早上起床干的事情<ol type="A" start="5"><li> 睁眼</li> E<li> 看手机</li> F<li> 穿衣服</li> G<li> 洗漱</li> H</ol>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~无序列表<ul>属性值：type 值(disc、square、circle)规定列表的项目符号的类型disc：圆型实心sqare：方型实心circle：圆型空心<!-- 无序列表 ul-->早上起床干的事情<ul type="disc"><li> 睁眼</li><li> 看手机</li><li> 穿衣服</li><li> 洗漱</li></ul>
块级标签：
在html中有两个块标签，<div>，<span>，其实就是一个盒子，用来存放元素的<div>：块级标签每一个div占满一整行，块级标签<span>：行内级标签文本信息在一行展示，行内标签，内联标签<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>容器标签</title></head><body><span>内联span1</span><span>内联span2</span><span>内联span3</span><div>块级div1</div><div>块级div2</div><div>块级div3</div></body></html>
转义字符：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>实体字符</title></head><body>半个英语字母英文空格 一个汉字中文空格  小于号 <大于号 >&符号 &×叉号 ×除号 ÷￥人民币符号 ¥美元符号 $版权 ©注册商标 ®</body></html>
表格标签：
用于布局排版，有条理性的展示数据的表格内的基本标签：<table> : 定义一个表格<tr> : 定义一行<td> : 定义一个单元格表格的基本属性：table：border：边框width：宽度align：表格的对齐方式（left，center，right）cellspadding：定义内容和单元格的距离，通常取值为0cellspacing：定义单元格之间的距离，通常取值为0bgcolor：设置表格的背景色tr：bgcolor：设置单元格的背景色align：设置单元格的内容的对齐方式（left，center，right）td：colspan：合并列rowspan：合并行table的字标签：th： 定义表格标题（表格内文字加粗）caption： 表格标题 （在表格的上方中央）tbody： 表示表格的体部分bfoot： 表示表格的脚部分
HTML表单：
HTML的表单标签用于手机用户输入浏览器中的数据，并发送给服务器
表单标签：
form：用于定义表单的，可以定义一个范围，范围代表采集用户的数据范围
属性：acction 指定要提交数据的URL
属性：method 指定提交方式
method提交方式：
提交方式一共有7种，常用的有两种：get、post
get：
1、请求参数会在地址栏中显示，会封装到请求行中
2、请求参数大小是有限制的
3、不太安全
post：
1、请求参数不会再地址栏中显示，会封装到请求体中
2、请求参数的大小没有限制
3、较为安全
表单项标签：
type属性值：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
1、要想多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2、一般会给每个单选框提供一个value值，指定其被选中后提交的值
3、checked属性，可以指定默认值
checkbox：多选框
1、一般会给每一个多选框提供value值，指定其被选中后提交的值
2、checked属性，可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
submit：提交按钮，可以提交表单
button：普通按钮
image：图片提交按钮（src：属性指定图片的路径）
label：指定输入项的文字描述信息（label的for属性一般会跟input的id属性值对象，如果对应了，则点击label区域，会让input输入框获取焦点）
select标签：
可以实现下拉选择框：
属性：name 规定下拉列表的名称
子标签：
option元素 定义下拉列表中的一个选项
1、value 文本 定义送往服务器的选项值
2、selectde selected 表现为选中的状态
3、disabled disabled 加载时被禁用
textarea标签：
定义多行的文本输入控件
属性：cols 指定列数，每一行有多少个字符
属性：rows 默认多少行
3、小Demo_个人简历
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>个人简历</title></head><body><table border="1" cellspacing="0" cellpadding="0" align="center" width="50%"><tr align="center" ><td colspan="5" bgcolor="#DBECB4"><b>个人简历</b></td></tr><tr align="center"><td width="15%">姓 名：</td><td width="25%"></td><td width="15%">性 别：</td><td width="25%"></td><td width="30%" rowspan="4">照片</td></tr><tr align="center"><td>婚姻状况：</td><td></td><td>出生年月：</td><td></td></tr><tr align="center"><td>民 族：</td><td></td><td>政治面貌：</td><td></td></tr><tr align="center"><td>身 高：</td><td></td><td>学 历：</td><td></td></tr></table></body></html>
4、小Demo_请假条
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>请假条</title></head><body><table cellpadding="0" cellspacing="0" width="50%" border="1" align="center"><tr align="center"><td width="12%">姓名</td><td width="12%"></td><td width="10%">部门</td><td width="12%"></td><td width="10%">职位</td><td width="12%"></td><td width="16%">申请请假时间</td><td width="16%"></td></tr><tr align="center"><td rowspan="2">请假类型</td><td rowspan="2" colspan="2"><p>事假 病假</p><p>年修假 其他</p></td><td rowspan="2">请假时间</td><td colspan="3">由 年 月 日 时起</td><td rowspan="2">共 天 时</td></tr><tr align="center"><td colspan="3">由 年 月 日 时起</td></tr><tr><td colspan="8"><p> 请假原因：</p><br /><p align="right">请假人姓名： </p></td></tr><tr align="center"><td rowspan="2" width="5%">审 <br /> 批<br />意<br />见</td><td width="30%" colspan="3">主管</td><td width="30%" colspan="2">经理</td><td width="17.5%">人力资源部</td><td width="17.5%">总经理</td></tr><tr><td colspan="3"> </td><td colspan="2"></td><td> </td><td> </td></tr><tr><td rowspan="4" colspan="6" width="70%">备注：<br />请假两天以内找直属上级主管签字确认：<br />请假三天以上找直属上级主管部门审批最终由副总<br />经理审批签字确认;</td><td width="30%" align="center" colspan="2" >联系方式(重要)</td></tr><tr><td colspan="2"> </td></tr><tr><td align="center" colspan="2">应急人联系方式</td></tr><tr><td colspan="2"> </td></tr></table></body></html>
若有收获，就点个赞吧
0 人点赞
