黑马html笔记

firewrk

已于 2022-12-10 21:55:25 修改

阅读量253

点赞数

文章标签： html 前端

于 2022-12-10 14:27:27 首次发布

本文链接：https://blog.csdn.net/firewrk/article/details/128264823

版权

一、网页的形成

1、认识web

网页主要由文字、图像、超链接等元素组成，以及图像视频、音频等。

2、浏览器

网页显示、运行的平台。

3、浏览器内核

负责读取网页内容、整理讯息、计算机网页显示

4、web标准

web标准三层组成

包括结构、表现、行为

结构：用于对网页元素的进行整理和分类，用html描述

表现：设置元素版式、颜色、大小等外观，用css描述

行为：网页模型的定义及交互，用javascript

二、HTML初识

1、HTML指的是超文本标记语言，用来描述网页的一种语言。

2、HTML不是编程语言，而是一种标记语言

1.1HTML骨架标签

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

<html></html> 根标签

<head></head>头标签

<title></title>文档的标题  页面的网页标题

<body></body>文档的主体  页面内容基本都放在body里

<html>
    <head>
        <title>我的第一个页面</title>
    </head>
    <body>
        内容
    </body>
</html>

1.2HTML标签分类

1、常规元素（双标签）

<标签名> </标签名> 前者为开始标签后者为结束标签。结束标签有个关闭符/

之间包含内容

2、空元素(单标签)

<标签名/> 简单说不需要包含内容的用单标签

1.3HTML标签关系

1、嵌套关系

<head>
    <title></title>
</head>

2、并列关系

<head></head>
<body></body>

三、代码开发工具

sublime、webstorm、vscode等

vscode 使用

安装插件

1、open in browser

2、js-css-html formatter自动格式化代码

3、auto rename tag 自动重命名配对的标签

4、css peek追踪至样式

输入！可自动生成骨架

四、HTML模板

<!DOCTYPE html>#标记文档类型 由html3.0 4.0 等版本上面代码表示为html5版本
<html lang="en">#lang指定页面语言 en表示英文、zh-CN表示中文
<head>
    <meta charset="UTF-8"> #charset指定字符集
    <title>Document</title>
</head>

<body>

</body>

</html>

五、字符集

计算机要准确的处理各种字符集文字，需要进行字符编码，

按照规定字符集编码规则保存和解析字符

不合适的字符集选取会导致乱码

常见字符集

UTF-8 目前最常用的字符集编码方式基本包括所有国家需要的字符

GB2312 中文字符集

BIG5 繁体字符集

GBK 是GB2312的扩展包含了繁体字符集

六、HTML标签的语义化

简单来说就是给对应的内容加上合适的标签使结构更加清晰明了

1、方便阅读

2、让浏览器和爬虫可以更好的解析

3、语义化标签会具有更好的搜索引擎优化

七、HTML常用标签

1.1排版标签

1】标题标签 h

html提供六个标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>

2】换行标签 br

break的缩写

<br/>

3】段落标签p

<p>段落</p>

4】水平线标签hr

<hr/>

5】div 和 span标签

这两个标签没有语义，用于布局

div 是division缩写。分割和分区的意思

<div>

</div>
<div>

</div>

一行只能有一个div

网页效果就是

【】

<span>

</span>

一行上可以有多个span

网页效果就是

【】【】【】

1.2文本格式化标签

1】加粗 b 和 strong（重要）

<b></b>
<strong></strong>

推荐strong

b只是加粗效果，而strong带有强调的语义

2】斜体 i 和 em（重要）

<i></i>
<em></em>

3】删除线 s和del

和上面使用方法一样

4】下划线 u和ins

和上面使用方法一样

以上四者都推荐用后者的方式 1和2重点记住

1.3标签属性

<标签名属性1=“属性值1” 属性2=“属性值2”…></标签名>

属性不分顺序

1】图像标签img

<img src="图像url"/>

border之后会用css做，这里认识就行

2】链接标签 a

<a herf="跳转目标url" target="目标窗口的弹出方式">文本或者图像</a>

target 有两种取值，_self和_blank 其中_self为默认值，_blank为新窗口打开的方式

注意

1、外部链接需要添加http://www.baidu.com

2、内部链接直接链接内部页面名称即可

3、如果当时没确定链接目标通匙将herf值定义为“#” 表示暂时为空

4、文本，图像、表格、音频视频等都可以添加超链接

1.4注释标签

注释标签内容不显示在页面上

vscode快捷键ctrl+/

八、路径

目录文件夹

就是普通的文件夹

根目录

第一层文件夹

相对路径

./当前文件夹

…/上一层文件夹

绝对路径

c:\user\timg.gif

九、扩展阅读

1】锚点

通过创建锚点链接，用户能够快速定位到目标内容

1、在要跳转的文字或其它元素上标记id名

<h3 id='two'>第二集</h3>

2、使用a标签使href的值为对应目标的#加上id名

<a href='#two'>文本</a>

2】base

<base target="_blank"/>

直接定义所有链接的新窗口打开方式，写在head中

3】预格式化文本

pre中代码文字写的是什么效果就显示什么效果即保留空格和换行，不常用

<pre></pre>

4】特殊字符

常用的特殊字符

特殊字符	描述	字符代码
	空格	&nbop;
<	小于	&lt ;
>	大于	&gt ;
&	和号	&amp ;

5】HTML发展之路

html

xhtml

感兴趣可以查阅

十、表格table

用处：显示、展示表格式数据，让数据显示更规范

组成：行tr,单元格td （没有列的概念）

1、创建表格

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表格 -->
    <table border='1'>
        <!-- 第一行 -->
        <tr>
             <!--单元格1-->
            <td>姓名</td>
             <!--单元格2--> 
            <td>年龄</td>
             <!--单元格3-->
            <td>性别</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>

</html> </table>

2、表格属性

属性	描述	值
border	表格边框	像素值
width	宽	像素值
height	高	像素值
align	设置表格在网页中水平对齐方式	left\center\right
cellspacing	单元格之间距离	像素值
cellpadding	单元格内字和边框距离	像素值

3、表头单元格th

作用：一般位于第一行第一列，并且文本加粗

 <!-- 表格 -->
    <table border='1'>
        <!-- 第一行 -->
        <tr>
             <!--表头单元格1-->
            <th>姓名</th>
             <!--表头单元格2--> 
            <th>年龄</th>
             <!--表头单元格3-->
            <th>性别</th>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>

4、表格标题caption

必须紧跟table标签之后

<table>
    <caption>表格标题</caption>
</table>

5、合并单元格

1、合并单元格两种方式

①跨行合并：

rowspan=“合并单元格数"

②跨列合并：

colspan="合并单元格数"

    

2、合并单元格三部曲

①确定跨行还是跨列

②根据先上后下、先左后右原则找到目标单元格然后写上合并方式和合并的单元格数量

③删除多余单元格（被合并单元格会变成多余单元格）

6、拓展：表格划分结构

对于复杂表格可以划分为

标题

表头

主体

脚注

1、标记表格头部可以不用th而直接用头部标签将所有头部单元格包含

2、标记表格主体

3、标记脚注

以上标签都要放在table中

  <!-- 表格 -->
    <table border="1" align="center">
        <!--表头 -->
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>脚注:</td>
                <td colspan="2">这是一个表格</td>
            </tr>
        </tfoot>

    </table>

十一、列表

与表格类似，但布局不如表格规整，组合更加自由，去掉了表格行的概念

1】无序列表ul

unorder list

<body>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
    </ul>
</body>

2】有序列表（了解）ol

order list

<body>
    <h2>奥运金牌榜</h2>
    <ol>
        <li>美国</li>
        <li>英国</li>
        <li>俄罗斯</li>
    </ol>
</body>

3】自定义列表dl


<body>
    地区：
    <dl>
        <dt>北京</dt>
        <dd>昌平区</dd>
        <dd>海定区</dd>
    </dl>
</body>

dt 为主 dd为从

十二、表单

表单的目的式为了收集信息

例如注册邮箱等页面用的就是表单

组成：表单控件提示文本表单域

1】input控件

语法：

<input type=""/>

type

属性	属性值	描述
text	text	单行文本输入框
	password	密码输入框
	checkbox	复选框
	radio	单选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	用户自定义	控件名称
value	用户自定义	默认文本值
size	正整数	显示宽度
checked	checked	使默认被选中
maxlength	正整数	允许的最大字符数

1、单选复选

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

单选按钮通过设置相同的name值来使其只能选择一个

而复选框同一组别的应设置相同name但依旧可以选择多个

用checked可以使初始处于默认选中状态

2、button

<input type="button" value="获取验证码"/>

3、submit

<input type="submit" value="提交"/>

4、reset

在form中才会起效果

<input type="reset" value="重置"/>

5、image按钮

    <input type="image" src="url" />

6、文件域

<input type="file" value="上传文件"/>

2】lable标签

目的：为了提高用户体验

当点击lable时被绑定的表单控件能获得输入焦点

方法一：

直接包含表单

<label>用户名:<input type="text"/> </label>

方法二：

for属性规定label与哪个表单id绑定与锚点类似

<label for="name">昵称：</label>
<input id="name" type="text"/>

3】textarea控件（文本域）

例如：评论输入框

<textarea></textarea>

文本框input一次只能输入一行，应用于用户名，密码等

文本域可以输入多行，应用于评论框、留言板等

4】select下拉列表

<select>
    <option>选项1</option>
    <option>选项2</option>
    ...
    <option>选项n</option>
</select>

在option中定义selected="selected"为默认选中项

实际开发中select使用较少

5】form表单域

将之前写的表单全部用form包含起来，提交时可以一块提交给后端

<form action="">
    用户名：<input type="text"/>
    密码：<input type="password">
</form>

action中为提交的url地址

method 取值为get或post提交方式

name名称

十三、查文档

W3C

MDN

经常查阅文档是个好习惯