HTML小结

最新推荐文章于 2023-09-06 08:30:00 发布

weixin_44331856

最新推荐文章于 2023-09-06 08:30:00 发布

阅读量118

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44331856/article/details/104330586

版权

一.HTML初识

1.什么是HTML？

	是计算机语言中的其中一种，是一种标签语言，全称叫超文本标签语言。
英语：HyperText Markup Language。
超文本：文字，图片，音乐，视频，程序，链接… 一张网页上面放的放的就是超文本。
标签：叫标记  <abc> <name></name>  html中定义好一些标签，如<h1></h1>  <img />

2.HTML基本骨架

<!DOYTYPE html>              /*闻档声明*/
        <html>				/*文档的根标签*/
            <head>			/*文档的头标签*/
           		<title> </title>    /*网站的标题，有利于SEO（网络引擎优化）*/
                <meta charet="utf-8">  /*元信息，charet是一个标签属性，utf-8为编码格式*/
            </head>			
            <body>			/*主题内容，大量代码都会放在body里*/
                <h1>Hello HTML~</h1>
            </body>
        </html>

3.HTML的构成和语法

1）HTML中的标签，属性，元素的概念？

					`<h1 class="box">Hello HTML~</h1>`
标签：<name>  一个标签就是一个单词使用<>包含起来。<h1></h1>
属性：在开始标签中以xxx="xxx"形式的文本，叫属性。class="box"
元素：开始标签+结束标签+属性+标签中的所有的内容。<h1 class="box">Hello HTML</h1>

2）标签的分类

单标签：只有开始标签，没有结束标签，最后的/可以，可不加。如<meta />
双标签：有开始标签，也有结束标签，结束标签比开始标签多了一个/。如<html></html>
**注意：**1，并非所有的标签都有结束标签，比如：<img />, <br />, <hr/>，它们都可以看作自结束标签。
2，如：<meta charset=”UTF-8” />   meta是标签  charset是属性名， UTF-8是属性值，属性名可以使用单引号或双引号，也可以不加

3）基本语法

A，HTML中不区分大小写。
B，对于单标签，最后的/，可加可不加。
C，属性值可以加引号，也可以不加。
    ...  语法比较灵活 
**好习惯**
A，必须有基本的骨架。
B，标签都小写。
C，给属性值加上引号。
D，标签不能交叉。
E，标签要正确的关闭。

4.什么是标签语义化

不同的标签所代表的含义是不一样。根据不同的语义使用不同的标签，也就是说什么样的标签干什么事。
大标签：div+css ;一个网页的标签的语义化好了，也是有利于SEO。
DIV+SPAN是没有任何语义。DIV就是为了和CSS配合进行布局。
HTML5中提供了更有语义的DIV，如:header, footer, nav, seciton....
现在主流还是DIV。

5.web网页的三层结构

结构层：由HTML提供的。核心是DIV。也就是内容层。
样式层：由CSS提供的，CSS的两大作用，布局（浮动布局，流式布局，层布局，flex布局），美化（盒子模型+其它属性）
行为层：由JS提供的。难

二.HTML中常用的标签

1.标题标签

h1~h6
作用：用来定义标题，h1定义最大的标题，h6定义最小的标题
标题有两个标签：<title></title>    <hn></hn> ; h是headline的缩写;几乎每个网站都会用到h标签，龙其是h1和h2; 标题标签是有利于SEO
场景：新闻，博客，文章的标题 / 网站的logo 
男标签，块级标签，独占一行

2.段落标签

作用：语文中的段落，用来分隔内容，使内容调理清晰
格式：<p>内容</p> ； p是paragraph(段落)的缩写
p通常会配合<br/>使用；<br/>为换行标签，也是单标签
男标签，块级标签，独占一行

3.超链接标签

作用：用于链接其它资源（网页，视频，图片......）
场景：形成一个链接  站外链接  站内链接   锚点链接
格式：<a  href=””  target=””  title=””  name=”” >百度一下，你就知道</a> ；   a是anchor(超链接)的缩写
**超链接常见属性：**
- href：用于链接到某个资源
- target:表示目标，我们在打开一个页面时，是要新窗口打开还是在当前窗口打开，或是在框架中打开，就取决于这个属性，常见的属性值有两个：
	_blank  表示在新窗口中打开
    _self    表示在当前窗口中打开
 - title: 当鼠标放到链接上时，显示出title对应的属性值（内容）
 - name: 用于设置锚点
**注意问题：**
A.连接到外面的页面时，通常需要加上http://，http和https的区别是，加s的表示现加安全的通信协议。
B.对于超链接标签，如果不写href属性，是没有任何意义的
C.任何标签都有title属性，只在是超链接上用的比较多而已
站外链接：所谓的站外链接，就是链接到互联网上的某个资源
站内链接：什么是站？站是由多个页面级成并上线的。对于站内链接，一般不使用绝对路径，会使用相对路径，相对路径是相对于当前文件本身的
./            ./表示当前目录
../           ../表示上一级目录，不能省略
锚点链接：先建立锚点，需要设置a标签name属性，然后连接到锚点，需要设置a标签的href属性
<a name="xxx"></a>     <a href="#xxx">连接到某个锚点</a>
特殊的锚点：top   <a href="#top">返回顶部</a> ； top可以不写   <a href="#">返回顶部</a>
<a href=””></a>
<a href=”#”></a>
不带#表示重新加载（刷新），带#表示返回顶部

4.图片标签

作用：用来在浏览器上显示一张图片
格式：<img src=”” width=”” height=”” alt=”” title=”” />；  img 是image(图片)的缩写  ；  src 是source（源）的缩写。默认情况下，图片按实际大小来显示
属性： 
src: 图片的地址（相对地址，绝对地址）
alt: 1）当图片路径出错时，显示提示内容 2）有利于SEO；alternate（替代）的缩写
widht: 设置图片的宽度
height:设置图片的高度
女标签（特殊的女标签），行标签， 可以实现并排显示

5.div和span

作用：用来组织划分结构，没有任何语义，主要是配合CSS完成页面的布局，美化网页
格式：<div>内容</div> <span>内容</span>;  div是division(分隔)的缩写; span是跨度的意思
div独占一行，它是一个块级元素，没有语义
span可以实现并排显示，它是一个行内元素，也没有主义

三.列表标签

列表是一组标签，分为有序列表，无序列表，自定义列表。
**无序列表：**
	<ul></ul>  每一个列表项使用<li></li>。默认情况下，每一个li前面有一个小黑点，在CSS中通常都会直接去掉。li是list的缩写，ul是unorderlist的缩写
**有序列表：** 
    <ol></ol>  <li></li>  默认情况下，会有一个标签，在CSS中也会去掉，通过自己设置标识。li是list的缩写，ol是orderlist的缩写
**自定义列表：**
	<dl></dl>  <dt></dt>  <dd></dd>  dl   definitionlist的缩写；dd definition description的缩写  dt   defintion title的缩写

在这里插入图片描述

四.表格标签

表格是由行和列组成的一个二维结构，其中的行用tr表示，列用td或th表示。
基本结构：

<table>
	<tr>
	<th></th>     /*通常用于第一行*/
	<td></td>
	</tr>
</table>

**table标签基本属性：**
width：宽度
height：高度
border：表示表格的边宽border是作用于table，但是它对单元格也有影响，让单元格也产生了边框。
如果把border边框调整为10的话，这只对最外层的边框起作用，对里面单元格是不起作用的，始终为1个像素
align：表示表格相对于父元素的对齐方式，这原父元素是body。
bgcolor：表示表格背景颜色
Cellspacing：表示单元格之间的距离,
cellpadding：单元格中的内容与单元格的边框的距离
***tr基本属性***
Height:设置行高
Bgcolor:设置某一行的背景颜色
Align:设置水平对齐方式
Valign:设置垂直对齐方式
对于align设置时，属性值有：left   center   right
Td和th的相关属性：
Rowspan：行合并       Colspan：列合并

五.表单标签

1. form元素

功能：用于创建一个表单
格式：

<form
 aciton="xxx" method="get">
</form>`

男标签，块级标签，独占一行
action：表示当前表单中的内容提交给哪个页面进行处理 	
method:表示当前表单提交的方式，常见的有get和post方式，默认是get提交
1）GET会将用户输入的内容放到地址栏里面，使用GET请求不安全
2）POST不会将用户输入的内容放到地址栏里面，相对安全

2. input元素

表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。
女标签（特殊的女标签，和img一样），行内块，可以并排显示
HTML4版本中常见的type:
        <input type="text" />  普通的文本框，用户名
        <input type="password" />  普通的密码框
        <input type="radio" />  单选框 如果有两个单选框，你要二选一，你需要加上name属性，name属性值需要一样。
        <input type="checkbox" />  复选框 
        <input type="file" />  文件上传
        <input type="submit" />  提交按钮，具备提交的功能
        <input type="button" />  普通按钮，没有提交的功能
        <input type="image" />  图片按钮
        <input type="hidden" />  隐藏区域，看不见，传递数据
HTML5版本中常见的type:  有兼容性问题，在不同的浏览器下，长的不一样
        <input type="email" />  表示写的数据，需要符合邮箱的格式
        <input type="url" />   表示写的数据，需要符合网站的格式
        <input type="number" />  表示写的数据，必须是数字
        <input type="range" />  不是一个输入框，范围的选择器
        <input type="search" />  输入框后面多一个x  
        <input type="color" />  不是一个输入框，颜色的选择器
**注意：**
1)每一个input标签都有一个value属性，不同类型的input， value的作用也不同
对于type=”text”来说，value可有可无，因为用户输入的内容都可以提交过去。
对于type=”radio”或type=”checkbox”来说，没有value，是提交不了的。
2）对于type=”radio”来说，如果你只想选择一个，需要给每个input添加一个name属性，属性值也必须一致，如果不添加，就不能满足单选框的需求
3）关于单行文本的宽度，可以使用size属性来设置，表示字符长度，实际上不用，我们一般是通过CSS进行控制的

3.select和option

作用：用来实现下拉列表
格式：

<select>
	<option>内容</option>
	<option>内容</option>
	<option>内容</option>
	</select>

默认情况下，提交时，它将option里面的内容作为提交的内容，但是通常我们不这样做，我们通常给opton设置一个value属性，属性值我们通常用数字

4）textare

作用：提供输入大量文本的输入框，比如，QQ空间中发表状态，贴吧发表贴子等
格式：<textarea></textarea>
标签属性：
rows：总共多少行
cols：一行多少字

六.vscode一些快捷键

shift+alt+向下箭头  复制上一行
按住鼠标中键，向下拉，同时选中多行
ctrl+B  把项目结构视图隐藏（展开）
shift+alt+f          格式化
ctrl+/  生成注释
参考别人写的代码：
    源码之家
    A5源码

开发者工具调试网页：
F12 鼠标检查
若想查询学习手册可以去搜素： MDN

weixin_44331856

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML小结

一.HTML初识1.什么是HTML？是计算机语言中的其中一种，是一种标签语言，全称叫超文本标签语言。英语：HyperText Markup Language。超文本：文字，图片，音乐，视频，程序，链接… 一张网页上面放的放的就是超文本。标签：叫标记 <abc> <name></name> html中定义好一些标签，如<h1></...
复制链接

扫一扫