美文网首页让前端飞Web前端之路Web 前端开发
html是web前端的基础知识,初学的你学对了吗?

html是web前端的基础知识,初学的你学对了吗?

作者: web前端学习指南 | 来源:发表于2019-10-24 09:31 被阅读0次

    html

    概念

    前端最核心的技术 HTML + CSS + javascript

    HTML - 结构 - 骨架

    CSS - 样式 - 效果

    JAVASCRIPT - (用户)行为 - 做的事情

    超文本标记语言

    超文本

    文本(txt文件) - 浏览器可以直接打开

    如果具有中文,可能出现乱码问题

    标记

    语法结构 - <标签名>

    注意 - 浏览器解析标记(规定的标记内容)

    注意

    HTML是不严格的语言

    允许不用编写所有内容

    标签名没有明确的规定(大小写)

    建议标签名使用小写

    XHTML

    解释为严格意义的HTML

    在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun,前面是133,中间868,后面是702。群里有不错的学习教程与开发工具、项目源码分享,专业的老师解答问题。与你分享web前端企业当下人才需求及怎么从零基础学习好web前端,和学习什么内容。

    HTML结构

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

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

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

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

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

    </head>

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

    </body>

    </html>

    声明

    注意 - 必须在HTML文档的 0 行 0 列

    记住 - HTML5的声明<!DOCTYPE html>

    作用 - 告诉浏览器当前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>

    链接元素<a>

    作用

    用于从当前页面跳转到另一个(指定)页面

    实现锚点效果

    实现回到顶部效果

    实现发送邮件功能(了解)

    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

    在成为一个优秀的前端工程师的道路上,充满了汗水和辛劳。

    不论你是学生还是想转行的朋友,我都欢迎,不定期分享干货,整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家

    相关文章

      网友评论

        本文标题:html是web前端的基础知识,初学的你学对了吗?

        本文链接:https://www.haomeiwen.com/subject/yhcrvctx.html