HTML基础，这一篇就够了

最新推荐文章于 2022-10-18 17:16:56 发布

Slovenl

最新推荐文章于 2022-10-18 17:16:56 发布

阅读量760

点赞数 1

文章标签： html

学习的过程很漫长，汲取他人经验是很重要的一项，文中所述可能借鉴了他人经验，如有侵权，告知删除，同时也感谢开源~

本文链接：https://blog.csdn.net/qq_30124547/article/details/53537385

版权

1. html骨架

标注的html骨架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML4.0最低兼容IE6,html5最低兼容IE9,手机端可以用h5了，但是web端还需要向下兼容。

在h5中定义便比较简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题，显示在浏览器Tab名称</title>
</head>
<body>
</body>

2. meta

格式：
```
<meta name=”” content=”” />
```
指定字符集：常用的有两种
- utf-8:包括全部的人类语言，库大，文件大
- gbk：中文和少数外语符号，库小，文件小
```
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
```

关键字、页面描述：seo，搜索引擎优化相关

<meta name="Description" content="这是一个记录学习与成长的博客" />

关键字

<meta name="Keywords" content="美女,金钱,男性,健康" />

3.title标签

    <title>网页的标题</title>

也是有助于搜索引擎优化

4.html的一些特点

html对换行、tab不敏感。
标签要封闭
空格可以用 &nbsp

5.h标签

标题标签h1-h6，容器级标签，理论上可以放p等标签，但是一般不这么写。

6.p标签

文本级标签，标签内只能放文字，图片，表单元素，可放a标签，a标签相当于纯文本

7.img标签

图片标签,属于自封闭标签。

src表示路径，路径有绝对路径和相对路径。

相对路径：../images/1/jpg值上层的images文件夹中1.jpg图片
绝对路径：D:/images/1/jpg（不用）
alt是当图片无法加载时，显示的文字，部分浏览器不支持。
```
<img src="1.png" alt="无法显示图片"/>
```

8. a标签（超链接）：文本级标签

<a href="www.baidu.com" title="鼠标悬停" target="_blank">百度一下</a>

href：跳转的连接
title：鼠标放上去显示的文本
target：是否在新的标签页打开，_blank是，默认不是

9.列表

无序列表 ul（只能有li标签）—-li（是一个容器级标签，里边什么都可以放）
- 北京
- 广州
- 铁岭
有序列表 ol—–li（用的不多，功能ul可以实现）

10.定义列表

dl—-dt—-dd：常用组合

<dl>
    <dt>北京</dt>
    <dd>国家首都国家首都国家首都国家首都</dd>
    <dt>上海</dt>
    <dd>东方明珠东方明珠东方明珠东方明珠</dd>
    <dt>广州</dt>
    <dd>深圳的深圳深圳的深圳深圳的深圳</dd>
</dl>

dt、dd都是容器级的标签，里边放什么都可以

11.div

本身不带效果，表示一个小区域，容器级标签，里边什么都可以放，放大东西的。

12. span

也是小区域的标签，但是一个文本级的标签。只能放文字、图片、表单元素。不能放p、h、ul、dl、ol、div。主要放置小元素

13.表单

action，method两个属性，action提交的地址，method为get,post方式

    <form>
        所有的表单内容，都要写在form标签里面
    </form>

文本框（自封闭）

<input type="text" value="默认值"/>

密码框（自封闭）
```
<input type="password" />
```

单选按钮，name需要一样

<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女

复选框

<p>
请选择你的爱好：
<input type="checkbox" name="hobby"/> 睡觉
<input type="checkbox" name="hobby"/> 吃饭
<input type="checkbox" name="hobby"/> 打豆豆
</p>

下拉列表：组标签

<select>
    <option>北京</option>
    <option>山东</option>
    <option>安徽</option>
</select>

文本域 cols:列 rows:行

<textarea cols="10" rows="10"></textarea>

按钮

普通的按钮，value为按钮显示的文字
```
<input type="button" value="我是一个普通按钮" />
```
提交的按钮：提交到form的action属性的地址去，按钮显示提交文字
```
<input type="submit" />
```
重置按钮：把表单内容重置
```
<input type="reset" />
```

label 标签，一个文本，通过for—id，与标签绑定

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>

14.注释

    <!--注释的内容-->

15.一些实体字符

    &lt  ：  <
    &gt  ：  <
    &copy:  ©️
    &nbsp： 空格

16. 一些废弃的标签

现在html只负责语义，不负责样式，css负责样式，所以html以前的包含样式的标签被废弃了

如font， b，u, i, del,em,strong,hr,br

标准的div+css页面用的标签只有

div  p  h1  span   a   img   ul   ol    dl    input

Slovenl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫