HTML基础总结

最新推荐文章于 2024-06-22 15:09:24 发布

loey_ln

最新推荐文章于 2024-06-22 15:09:24 发布

阅读量111

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/loeyln/article/details/112972105

版权

1. 什么是HTML？

HTML(Hyper Text Markup Language) 中文名叫做超文本标记语言
HTML 是一种标记语言 (markup language)，标记也叫标签
标签就是使用 < 和 > 包含的一个英文单词（也有可能是一个字母）
标签分为单标签和双标签两种
例如: <span></span>、<link />
标签中还有属性

2.标签

2.1 基本结构标签

<html></html>在这个标签之间的内容就是html文件
<head></head> 头部标签，设置浏览器特性，head标签的所有内容不会在网页上展示
<body></body> 主体部分，给用户展示的内容
<meta name=“属性值”/> 附加信息标签，如name，content等
utf-8 万国码 gbk国家标准扩展字符集
<title></title> 网页的标题
<html lang="en"> 英文 <html lang="zh"> 中文

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
    <title>这是标题</title>
    </head>
    <body>
    </body>
</html>

2.2 常用标签

<p>段落标签
<h1></h1>~<h6></h6> 标题标签
<hr/>水平分割线
<br> 换行
> > 大于号 < < 小于号
  空格
<b> <strong> 加粗
<i> <em>倾斜
<u> <ins>下划线
<del> <s>删除线
<img scr="路径" alt="" title=""> 图片标签（alt是图片不显示是代替的文字，title是鼠标划过时显示的文字）
<a href="链接">超链接 ;target="_blank"
<sup></sup>下角标 <sub></sub>上角标
<ins></ins>底部插入文字
<div></div>块级元素
<span></span>行内元素/内联元素
<button></button> 按钮标签

2.3 link标签

连接外部样式表：

<link rel="stylesheet" type="text/css" href="a.css"/>

被link链接的css文档"a.css"是本文档的样式描述文件

链接外部icon图标为浏览器栏目图标

<title>link-图标</title>
<link rel="icon" sizes="30*30" href="./img/j4.ico" >```

在这里插入图片描述

2.4表格标签

<table width="" height="" border="" cellspacing="" cellpadding="">     <!--表格开始-->
   <caption>...</caption><!--表格标题，居中显示-->
   <tr>		<!--tr行标签-->
       <th>...</th> <!-- 表格头，内容居中、加粗显示-->
   </tr>
   <tr>
      	<td>...</td>	<!--td单元格-->
      	<td>...</td>	<!--td单元格-->
   </tr>
</table>

<td colspan=n> n列合并
<td rowspan=n> n行合并
border="" 表格边框
cellspacing="" 表格子框间距离
cellpadding=""表格子框距内容间距
默认值全为2

2.5 列表标签

//有序列表
<ol>
   <li></li>
   <li></li>
</ol>
//无序列表
<ul>
   <li></li>
   <li></li>
</ul>
//定义列表
<dl>
   <dt></dt>
   <dd></dd>
   <dd></dd>
   <dt></dt>
   <dd></dd>
</dl>

去除列表样式：list-style:none;

2.6 表单标签

<form action="" method="">
	 //输入框
	<input type="" name="" id="" value="" /> 
	//下拉选择框
	<select name="">
		<option value=""></option>
		<option value=""></option>
	</select>
</form>

method属性：提交表单的方式（GET或POST）
action属性：指定表单请求的路径
type属性值：text,password,botton,radio(单选),checkbox(复选框),reset(重置按钮),submit(提交按钮),img(图像形式的提交按钮),file(定义输入字段和 "浏览"按钮，供文件上传),hidden(定义隐藏的字段)

2.7 锚点

//同页面
<a href="#锚名1">目录1</a>
<a href="..." name="锚名1">内容</a> 
//不同页面
<a href="网页名称#锚名">...</a>
<a name="锚名">...</a>

2.8 h5c3 添加

（1）marquee滚动标签

<marquee > </marquee>
属性：

behavior属性：滚动的方式
属性值：
alternate：来回滚动
scroll：单方向循环滚动
slide：只滚动一次
direction属性：滚动的方向
属性值：left,right,down,up
bgcolor属性：文字滚动范围的背景颜色
loop属性：循环次数，默认为无限循环

（2）transition 过渡属性

<style>
div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
}
div:hover
{
	width:300px;
}
</style>
<div></div>

鼠标移动到div元素上即会发生过渡效果

（3） box-shadow属性

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平阴影的位置
v-shadow ：垂直阴影的位置
blur ：模糊距离
spread ：阴影的尺寸
color ：阴影的颜色
inset ：将外部阴影 (outset) 改为内部阴影。

<style> 
div
{
   width:300px;
   height:100px;
   background-color:#ff9900;
   box-shadow: 10px 10px 5px #888888;
}
</style>
<body>
    <div></div>
</body>