HTML

最新推荐文章于 2023-12-23 11:34:30 发布

云上君

最新推荐文章于 2023-12-23 11:34:30 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/qq_34816935/article/details/106482307

版权

1.HTML概念：
英文全称：HyperText MarkUp Language
中文全称：超文本标记语言
超文本：不仅仅是文本，文本中可以包含图片，音频，视频，链接等内容。
标记：又称标签或元素，由一组标签组成，标签是由官网（w3c）统一定义的，不能随便写。
2.HTML的作用：用来搭建网页结构。
HTML5
3.HTML标签分类

按是否有主体分类	格式
有主体标签	<标签名属性名=属性值> <"/"标签名>
无主体标签	<标签名/>比如： br

按是否换行分类	特点
块级标签	独占一行，比如：div
内联标签	从左往右显示，不会独占一行。比如：span

**4.常用文本标签**
hr:水平分割线

按是否换行分类	特点
块级标签	独占一行，比如：div
内联标签	从左往右显示，不会独占一行。比如：span

font标签：
color:设置字体颜色
size:设置字体大小，取值范围1~7
face:设置字体的样式，如楷体
加标签快捷键选中字体，Alt+Ctrl+t
b:字体加粗
strong:字体加粗
i:字体斜体
br:换行
p:段落标签
：空格
title：当鼠标悬停在段落上时显示的提示信息

列表标签

1.有序列表格式:
<ol type=“1,A,a,I”

<li>番茄炒鸡蛋</li>

</ol >

2.无序列表格式:
<ul type=“disc,circle,square”
<li>番茄炒鸡蛋</li>
</ul >

块级标签和内联标签 **<div> **<span>
**<div>： 元素是块级元素，它是可用于组合其他HTML元素的容器。独占一行（划分网页布局）
**<span>： 元素是内联元素，可用作文本的容器，结合css使用。不会独占一行

实体字符
以&开头，以；结尾
在这里插入图片描述
图片标签
《img:图片标签
src:设置图片地址
width:设置图片的宽度
height:设置图片的高度
alt:当图片无法加载时显示的提示信息
title:当鼠标悬停在图片上时显示的图片信息》
**<img src:“img/girl13.jpg” width=“250px”>< /img>
**<img src:“图片地址” width=“250px”>< /img>

**超链接标签 <a>
<a:超链接标签格式文字或图片
href属性：设置要跳转页面地址
target属性：设置新页面打开的位置
_blank属性：在新窗口打开位置
_self:在当前窗口打开，默认值
title:当鼠标悬停在图片上时显示的图片信息

从当前页面跳转到当前页的其他位置：《锚点》
注：abc就是添加的锚点
<ol>
< li><a >菠萝</a><** /li>
<li><a href="#abc">芒果</a></li>
<li><a>草莓</a></li>
</ol> **
** < a name=“abc”> 芒果真好吃 </a>
从其它页面跳转到当前页面的锚点
《<a href=“需要跳转的地址#abc”></a>》

超链接打开邮件客户端格式：
《<a href=“mailto://1000@qq.com”> 给张三发邮件</a>》

表格标签：
在这里插入图片描述
<**table:一个table标签就代表一个表格
常用子标签：
tr:一个tr就代表格的一行
th:表格头部单元，一个th代表一个单元列（一列）
caption：设置表格主题
常用属性：
border:设置表格的边框
cellspacing:设置单元格与单元格间隔
cellpadding：设置单元格与表格边框间距
width:设置表格的宽度
align：设置表格居中，行或列内容居中
td常用属性：
colspan:设置单元格跨几列
rowspan:设置单元格跨几行

<table border="1px" width="350px"  cellpadding="0" cellspacing="0" >
<caption>学生成绩表</caption>
<tr align="center">
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>成绩</th>
</tr>
<tr  align="center">
    <td>100</td>
    <td>潘金莲</td>
    <td>女</td>
    <td>80</td>
</tr>
<tr  align="center">
    <td>200</td>
    <td>武大郎</td>
    <td>男</td>
    <td rowspan="2">90</td>
</tr>
<tr  align="center">
    <td>300</td>
    <td>红太狼</td>
    <td>女</td>

</tr>
<tr  align="center">
    <td>总成绩</td>
    <td colspan="3">900</td>
</tr>

form标签
< form>表单项< /form>作用:自动收集浏览器客户端用户输入的数据并提交给服务器
在这里插入图片描述
form：表单标签：
表单项标签：****<input>
常用属性：type 表单项类型
value 表单项的值
常用属性：action=“” 服务器地址（servlet地址）
method 设置提交方式，默认是get,可以取值为post和get
注意：如果表单项的内容需要提交给服务器处理，则必须给该表单项设置一个name属性

Post和Get的区别：

提交方式	区别
GET	参数位置：参数直接暴露在地址栏上数据大小：数据限制2KB左右安全性：因为数据直接暴露出来，不安全如何选择：如果数据量比较小且没有隐私数据，则可以选择get提交请求
POST	参数位置：提交的参数封装到请求体中数据大小：没有限制安全性：参数封装到请求体中了，没有直接暴露，相对安全如何选择：如果数据量大或包含隐私数据或文件上传，则可以选择post提交请求

常用表单项标签：
在这里插入图片描述
input:输入框
   常用type属性： text/password/radio/checkbox/file/submit/reset/button/hidden（隐藏文本域，修改是用到用户的id,不希望用户去操作，将其隐藏）/image(图片按钮)
select：下拉列表
   option:列表项
textarea:多行文本域
   rows:行数
   cols:列数