HTML复习

最新推荐文章于 2024-07-24 16:53:23 发布

陈小梓forever

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量141

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43916694/article/details/105954636

版权

互联网原理：上网就是请求数据

服务器：存储我们的数据。
浏览器：发起和接收数据的客户端。
http协议：超文本传输协议。请求和响应。

HTML基础

HTML：制作网页
纯文本文件：只保存文字内容，不保存样式。

HTML、css、js都是纯文本文件

HTML基本骨架

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DTD：明确我们网页使用的是哪个版本的HTML规范。

<!-- HTML5的DTD -->
<!DOCTYPE html>

head部分的内容都是给浏览器看的，是网页的一些配置。
mata标签规定了我们的字符集：
中文字符集常用的有两个：utf-8、gb2312/gbk
utf-8：包括了所有的语言，一个汉字3个字节。一些外文网站，不要求加载速度。
gbk：包含全部简体中文，和少部分其他语言，一个汉字是2个字节。大量文字的中文网站，要求加载速度。
title：内容显示在选项卡上，作为网站的标题。里面的内容可以帮助做搜索引擎优化。
body：里面的内容是给用户看的。

HTML语法：
（1）标签之间对空格、换行不敏感，标签之间的嵌套关系敏感。
（2）普通文本内部，有空白折叠现象。所有的空白都会被折叠成一个空格。
（3）标签：必须写在一对尖括号里，双标签必须成对出现，结束标签必须写关闭符号 / ，标签分为容器级和文本级。
（4）标签属性：k=“v”,k表示属性名，v表示属性值。属性写在起始标签内部。属性之间以及与标签名之间都需要空格隔开，一个属性可以有多个属性值，属性值之间也要用空格隔开。

HTML标签

h系列：一共分为六级。
作用：给我们的文本添加几级标题的语义。
h1标签：权重最高，提高搜索引擎优化，标签只能出现一次，尽量给logo。
h系列标签之间没有嵌套关系。
p标签：段落，只能作用于一段文字。
img标签：image图片的缩写。
属性：src属性必不可少，source，图片的路径。
路径：相对路径、绝对路径。
width：宽度。
height：高度，单位是像素可以省略单位。
单独设置某一个，另一个会按比例自动缩放。
title：鼠标悬停会显示提示文本。
alt：如果找不到图片时的替换文本。

a标签：超级链接，可以跳转到响应位置

a标签的属性：
href：超文本引用，值为跳转链接的地址。
target：表示是否在新标签页打开链接，值为"_blank"表示在新窗口打开。
title：设置鼠标悬停文本。
页面内锚点跳转：
通过设置的name、id属性跳转。
（1）给对应位置的标签添加一个id属性。
（2）在需要添加锚点的位置，加入一个a标签，不用书写href属性，添加一个name属性。
id名和name名在网页中的值都是唯一的。

<!-- 设置锚点 -->
<a name="maodian"></a>
<p id="maodian"></p>
<!-- 链接锚点 -->
<a href="#maodian"></a>

跨页面锚点跳转

<!-- 链接锚点 -->
<a href="网址#maodian"></a>

列表

无序列表：ul>li。
有序列表：ol>li。
定义列表：dl>dt+dd。
div和span
重要的布局标签 div+css布局大的布局用div小的用span
表格：table>caption+(thead>tr>th)+(tbody>tr>td)

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

合并单元格：
rowspan：跨行合并
colspan：跨列合并

表单：提供用户输入或选择的小控件
文本框：<input type="text" />
密码框：<input type="password" />
单选框：<input type="radio" />
浮选框：<input type="checkbox" />
普通按钮：<input type="button" value="普通按钮" />
提交按钮：<input type="submit" value="提交按钮" />
重置按钮：<input type="reset" value="重置按钮" />
文本域：<textarea cols="30" rows="30"></textarea>
下拉菜单：

<select>
    <option></option>
</select>

给单选框和多选框绑定文字：点击相关内容，也可以选择选框，提升用户体验。

<input type="radio" name="sex" id="boy"/><label for="boy">男</label>
<input type="radio" name="sex" id="girl"/><label for="girl">女</label>

<input type="checkbox" checked="checked" id="service"/>
<label for="service">同意“服务条款”</label>

html杂项

注释
注释：里面的内容是给程序员看的，不会渲染到页面上。
作用：清晰标注，有一部分代码不想显示，希望保留。
书写：
字符实体
我们的一些特殊符号，并不能直接在文本内容中书写。
html提供了一套书写特殊符号的替代符号，就是字符实体，或转移符号。
小于号：<
大于号：>
无换行空格： 
更多字符查看：HTML ISO-8859-1
废弃标签
文字添加样式：<font color="red">文字</font>
加粗：<b>加粗</b>
加粗：<strong>加粗，比i标签多了语义和权重</strong>
下划线：<u>下划线</u>
倾斜：<i>倾斜</i>
倾斜：<em>倾斜，比i标签多了语义和权重</em>
中划线：<del>中划线</del>
换行：<br />
水平分割线：<hr />

陈小梓forever

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML复习

互联网原理：上网就是请求数据服务器：存储我们的数据。浏览器：发起和接收数据的客户端。http协议：超文本传输协议。请求和响应。HTML基础HTML：制作网页纯文本文件：只保存文字内容，不保存样式。HTML、css、js都是纯文本文件HTML基本骨架<html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫