• 一. HTML认识


    1.1认识什么是纯文本文件txt
    window自带有一个软件,叫做记事本,记事本保存的格式就是TXT,就是英文text的缩写,术语上称呼为“纯文本文件.

    TXT文件,只能保存文本内容,是无法记录文本的样式的
    所以,doc和txt存储相同的文本内容,doc比txt大。
    纯文本就是这样的文件
     只有文本,没有样式
     用记事本等纯文本编译器可读,不是乱码
    HTML、CSS、js都是纯文本的

    1.2 HTML是负责描述文档语义的语言
    HTML的英文 hyperText Markup Language 的缩写 ,超文本标记语言
    HTML不仅仅是文本,还有图片,链接,视频,音乐等。

    结论:纯文本txt文件是不能描述文档的语义,文档中不知道谁是主标题,谁是段落,所有html应运而生,使用指定的标签对来显示文档的语义。

    1.3总结
    纯文本:只有内容,没有样式,常见纯文本:txt,html、css、js、java。没有语义,即使你在这个文件中对内容进行排版在清晰,也是没有作用的。实际上纯文本中的所有汉字都是平等的,没有任何语义。
    HTML:超文本标记语言,就是通过标签对,给纯文本添加语义,实际上其实就是用文本给文本添加语义,并且可以添加图片,链接,视频等,而一对对的标签,也就成标记,所以这些构成我们的“超文本标记语言”
    标签:主标题,段落,图片,链接,换行

    1. 主标题 h1-h6(文本添加指的标题语义) headline
    2. 段落 paragraph

    3. 换行
    4. 链接
    5. 图片 image
      二. HTML的骨架
      标准的HTML的骨架
    Document

    2.1 文档声明头
    任何的一个标准的HTML页面,第一行一定是以

    这一行,就是文档声明头,DocType Declaration,告知我们当前的浏览器文档使用哪种标记语言HTML/XHTML规范,到底有哪些规范?
    首先我们先确定。我们学习的是HTML4.01版本,这版本从IE6浏览器兼容,HTML5兼容从IE9开始的浏览器。但是IE6,7,8版本还没有过早淘汰,所以这几年用该还是使用HTML4.01版本来制作网页。
    大规范 里面的小规范
    HTML4.01 Strict 严格的,体现在一些标签不能使用,比如u
    Transitional 普通的
    Frameset 带有框架的页面
    XHTML1.0
    严格体现在小写标签、闭合、引号 Strict 严格的,体现在一些标签不能使用,比如u
    Transitional 普通的(我们学习的版本)
    Frameset 带有框架的页面
    Strict:表示当前模式里面的要求更为严格,这种严格体现在哪里?
    指的有些标签是不能使用的
    比如:U标签,就是可以让一个文本加上下划线,但是这和HTML本质冲突了,因为HTML只负责语义,并不负责样式,而U便签的下划线指的是不是样式。
    嘻嘻嘻嘻嘻嘻哈哈哈哈
    那如何给文本添加下划线,今后使用css属性来解决这个问题你
    Transitional 普通的(我们学习的版本)这个模式下面是没有特别要求
    Frameset 带有框架的页面 ,在框架页面使用

    2.2 字符街

    字符集采用mate便签定义,meta表示“元”,“元”配置,表示基础的配置项目。
    CharSet就是“字符集”character set
    第一种:UTF—8

    第二种:gb2312

    第三种 gb2312的简写 gbk

    什么是字符集?
    当前的计算机是不能存储汉字,而是存储是编码,所以计算机记录的实际是根据编码:二个字库UTF-8和gb-2312.
    UTF-8 全球国际通用,里面涵盖了地球上所有人类的语言,比如阿拉伯,汉语,鸟语。。。。。
    gb-2312 是国标,是中国的字库,里面仅仅涵盖了汉字和常见的英文
    字库 UTF-8 > gb-2312
    UTF-8里面存储的一个汉字3个字节,而gb-2312一个汉字2个字节
    保存大小 UTF-8(臃肿,加载更慢) >gb-2312(更加巧小,加载更快)
    总结:
    UTF-8 字多 有各种国家语言,但是保存尺寸大,加载慢
    Gb-2312 字少,但是尺寸小,加载快

    2.3关键字和页面描述
    页面描述
    mata除了可以设置字符街,还可以设置关键字和页面描述
    设置当前的页面描述

    主要设置description页面描述,那么百度搜索结果,就可以显示当前的页面描述的内容,这个技术叫做SEO(SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化,比如网站站外推广、网站品牌建设等,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名,从而吸引精准用户进入网站,获得免费流量,产生直接销售或品牌推广)

    meta name="description" content="贝沃汇力教育集团--IT精英教育产业创新的实践者和引领者,中国移动互联网行业的黄埔军校,致力于Html5、iOS开发、安卓、UI、VR领域的高端人才培养与项目研发,免费电话咨询:400-6086-345。" />
    抽象一下:
    <meta name = “ ” content =“”>
    name就是“名字” content就是“内容”也就是说,我们定义了一个“Description”的meta,内容是贝沃汇力教育集团--IT精英教育产业创新的实践者和引领者,中国移动互联网行业的黄埔军校,致力于Html5、iOS开发、安卓、UI、VR领域的高端人才培养与项目研发,免费电话咨询:400-6086-345

    关键字
    关键字:告诉搜索引擎,这个网页是做什么,能够提高搜索的效率,让别人能够快速的找到你,keyword就是“关键字”

    所以说当前,一个比较完成的网页骨架;

    Document

    三、HTML的基本语法特性
    3.1、HTML对换行不敏感,对tab不敏感

    1. 这是一个div的盒子!
    2. 这是一个三级标题

    3. 这是一个段落

    等价于:
    1.

    这是一个div的盒子!
    2.

    这是一个三级标题


    3.

    这是一个段落


    4.

    总结:HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系,但是我们发现良好的缩进,代码更加易读,要求大家正确的缩进标签
    百度为追求极致的显示速度,所以HTML的标签都没有换行,都没有缩进,HTML与换不换行无关的,标签的层次依然清晰,只不过程序员修改起来就很疼哭

    空白的折叠效果
    HTML中的所有文字间的之间,如果有空格、换行、tab都将会被折叠成一个空格显示。
    代码:里面空格、缩进、换行





    显示的时候 出现折叠的效果

    3.3标签要严格封闭
    多说一句:HTML、CSS实际上就是写代码,但是不能算“编程“,因为这里面没有业务逻辑,加减乘除,与或非,说白,就是用代码进行绘制。

    四.标签的使用
    4.1、 h系列

    都是标签

    一级标题(主标题)

    二级标题 ………………………
    六级标题

    4.2、p标签
    段落,英文Paragraph“段落”的缩写
    HTML的标签是分等级的,HTML的所有标签分为二种类型:容器级、文本级。容器级的标签里面可以存放任何东西
    文本级只能放置文字、图片、表单元素

    P标签是一个文本级的标签,从死死记住:p里面只能存放文字、图片、表单元素,其他一律不能放
    源代码:

    我是一个小小的段落

    我是一个主标题

    浏览器不允许你这么做,我们使用Chrome审查的时候,你会发现,浏览器自己把P封闭l,不让你去包裹h1

    所以再次强调:p便签是一个文本级的标签,只能存放图片、文字、表单元素。

    4.3、 img标签
    页面上可以插入图片,
    能够插入的图片类型:jpg(jpeg)、gif、png、bmp。
    不能往网页里面插入的图片格式有:psd、ai
    类型与类型之间有什么区别,我们在css中会讲到。
    4.3.1、语法
    HTML页面不是直接插入图片的,而是插入引用的地址,所以也要把图片上传到服务器上
    插入方法:

    Img是英文中的image”图片”缩写
    Src是英文中的”Source”资源的简写 ,千万不要写成scr
    Src是img的标签属性,1.jpg是这个属性值。

    这个标签和我们之前学过的标签,都不一样?当前的标签不是一对,自封闭标签,也称为单标签 mate标签也是自封闭标签

    4.3.2、alt属性
    加载失败或者是加载超时
    实例图
    alt是英文alternate“替代“的意思,就是不管因为什么原因,当这张图片无法被显示的时候,出现代替的文字(有些浏览器不支持)
    4.3.3、相对路径
    HTML中插入图片,有二个文件,一个html文件,一个jpg文件
    我们关心就是当前这二个文件的相对位置,即使这个网站项目吗,那U盘拷贝给别人,只要相对路径不变,图片就一定能正常显示
    如果当前的图片文件处于html文件的下一层目录

    加载失败或者是加载超时

    如果当前的图片文件处于html文件的上一层目录

    返回二级目录
    加载失败或者是加载超时 返回一集目录

    图片显示:

    4.4、a标签超级链接
    4.4.1、基本写法
    一个网站,是由多个html网页组成的,html网页之间能够通过超级链接相互形成跳转,从而形成了“网“.
    这是08-img的标签使用.html
    a是英文 anchor”锚”意思,就像这个页面往其他的页面扔出一个链接(锚),是一个文本级的标签。
    4.4.2、title属性
    title 悬停的文本

    title属性
    4.4.3、target属性
    target实际上是“目标“
    target属性
    blank的意思是“空白“,就代表新建一个新的空白窗口。为什么_,这个_就是规定。
    如果没有target="_blank ",那么就是在相同的标签页打开,如果写了target="_blank ",就是在新的空白标签页中打开,并且跳转的标签页还是存在的

    4.5、页面中锚点
    页面中其实也是可以有锚点。所谓锚点,其实就是一个小小的标记,这个小标记是用户不可察觉
    锚点可以用那name属性设置,或者是id属性设置,那么就是页面中的锚点
    我的第一个锚点
    这个是我的二个锚点

    如何点击跳转(前提是一个超级链接,指向页面中的锚点,才能在页面内跳转)
    点击看到我的一个锚点
    点击看到我的第二个锚点

  • 相关阅读:
    SVN 的基本用法
    Git的基本用法
    一般情况下设计应遵循的原则
    设置默认以管理员运行的WinForm
    为 dll (类库) 解决方案添加测试项目
    C# WinForms跨线程更新 UI
    Android 创建 SO 文件
    SQL之case when then用法
    SQL LIKE 通配符随笔
    document.all.item作用
  • 原文地址:https://www.cnblogs.com/ynavigatorqcarsauto/p/5977029.html
Copyright © 2020-2023  润新知