html是web前端的基础知识，初学者们真的学对了吗？

最新推荐文章于 2023-08-02 20:12:04 发布

IT界小南瓜

最新推荐文章于 2023-08-02 20:12:04 发布

阅读量89

点赞数

文章标签： html web前端前端前端开发前端基础

本文链接： https://blog.csdn.net/bianchengkk123/article/details/102800504

版权

html

概念
前端最核心的技术 HTML + CSS + javascript
HTML - 结构 - 骨架
CSS - 样式 - 效果
JAVASCRIPT - (用户)行为 - 做的事情
超文本标记语言
超文本
文本(txt文件) - 浏览器可以直接打开
如果具有中文，可能出现乱码问题
标记
语法结构 - <标签名>
注意 - 浏览器解析标记（规定的标记内容）
注意
HTML是不严格的语言
允许不用编写所有内容
标签名没有明确的规定(大小写)
建议标签名使用小写
XHTML
解释为严格意义的HTML

HTML结构

HTML结构

<!DOCTYPE html> - 声明:当前页面使用的是哪个HTML版本

<html lang="en">- 根标签:有且仅有一个

<head>- 用于设置当前页面的信息

<meta charset="UTF-8"> - 设置当前页面的编码

<title>Title</title> - 当前页面的标题

</head>

<body>- 用于显示在浏览器中

</body>

</html>

声明

注意 - 必须在HTML文档的 0 行 0 列
记住 - HTML5的声明
作用 - 告诉浏览器当前HTML页面使用的版本
不同的HTML版本支持不同的标记(标签)内容

根标签

<html></html>
除声明以外，所有内容全部被包含在根标签中
注意 - 有且仅有一个
标记（标签）
起始标签 - 有开始，有结束
开始标签 - <标签名>
结束标签 - </标签名>
空标签 - 只有开始标签
<br/>- 换行标签
注意 - 建议使用小写

<meta>元素

第一个作用 - 设置当前HTML页面的编码格式
<meta charset="UTF-8">
第二个作用 - 设置当前HTML页面的关键字
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
第三个作用 - 设置当前HTML页面的描述(很少)
<meta name="description" content="Free Web tutorials on HTML and CSS">
第四个作用 - 设置当前HTML页面的作者
<meta name="author" content="King">

HTML属性

出现在标签中的开始标签中，而不是结束标签
格式
属性名=属性值
属性值 - 必须使用双引号包裹

HTML页面被搜索引擎抓取

<title>元素 - 页面的标题
<meta name="keywords">元素 - 页面的关键字
<h1>元素 - 标题

分类

私有属性 - 当前标签独有的属性
标准属性 - 几乎所有标签都有的属性
事件属性 - 标准事件(了解)

HTML标题

<h1> ~ <h6> - 从最大到最小
并不关心标题显示的效果 - 可以通过 CSS 完成
关心标题的语义化
语义化 - 当前标签的含义

HTML列表

有序列表

<ol>

<li></li>

</ol>

默认情况下 - 1,2,3,4,5…
无序列表

<ul>

<li></li>

</ul>

默认情况下 - 黑点
定义列表

<dl>

<dt>列表名称</dt>

dd>列表项</dd>

</dl>

HTML链接

<a href="地址"></a>

如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun :767273102，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，网页制作，网站开发，web全栈开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系路线图】都有整理，分享给小伙伴：学习前端我们是认真的

链接元素

作用
用于从当前页面跳转到另一个(指定)页面
实现锚点效果
实现回到顶部效果
实现发送邮件功能(了解)
href=“mailto:邮件地址”
路径(地址)
绝对路径 - 查找的开始位置是固定
相对路径 - 查找的开始位置是变化
在实际开发中，使用更多
完整的地址
http:// localhost : 8080 /day02 #name
网络协议 IP地址端口号相对路径锚点
localhost - 等价于 127.0.0.1 - 表示本机
网络访问 - 通过互联网
http://192.168.10.165:63342/D…
file:///C:/0507/DAY02/CODE/00.html

C:\0507\DAY02\CODE\00.html

本地访问 - 和网络无关

图片元素

<img> - 空标签，没有结束标签
必要属性 - src属性

可选属性

width
height
单位
像素值
百分值

HTML表格

概念 - 具有行和列（单元格）
行 - 表示水平方向（多个单元格）
列 - 表示垂直方向（多个单元格）
HTML表格
- 表示为表格
作用
表格的语义化 - 配合 CSS 可以实现漂亮的表格效果
利用表格的行和列的概念 - 实现页面元素的布局
HTML表单
<form>标签
语义化 - 表示为表单
容器元素 - 浏览器中不会有任何显示效果
文件的编码格式 - UTF-8
HTML页面的编码格式 - UTF-8
<meta charset="UTF-8">
设置当前HTML页面的编码格式
在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式
字符集
概念 - 存放所使用的所有的字符（汉字）

分类

ANSI - 美国
ISO-8859-1 - 欧洲
GBK - 中国
GB2312
Unicode - 万国码
UTF-8 - 主要使用
UTF-16
计算机的存储方式
利用二进制方式 - 1和0
中国
存储 - 将汉字 “中国” 转换成二进制进行存储 - GBK
读取 - 将二进制转换成 “中国” 进行显示 - UTF-8

IT界小南瓜

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html是web前端的基础知识，初学者们真的学对了吗？

html概念前端最核心的技术 HTML + CSS + javascriptHTML - 结构 - 骨架CSS - 样式 - 效果JAVASCRIPT - (用户)行为 - 做的事情超文本标记语言超文本文本(txt文件) - 浏览器可以直接打开如果具有中文，可能出现乱码问题标记语法结构 - <标签名>注意 - 浏览器解析标记（规定的标记内容）注意HTML...
复制链接

扫一扫