• 【HTML】HTML基础笔记01


    一、认识网页和浏览器
    双标签:<标签名> 内容 </标签名>
    单标签:<标签名 />
    单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

    html标签的关系分为两种:
    嵌套关系:
    并列关系:
    倡议:如果两个标签之间的关系是嵌套关系,子元素最好锁紧一个tab键
    的身位,如果是并列关系最好上下对齐

    html标签的语义化:
    所谓语义化,就是指标签的含义。
    为什么语义化:
    方便代码的阅读和维护
    同时让浏览器或网络爬虫可以很好地解析,从而更好分析其中的内容
    使用语义化标签会具有更好地搜索引擎优化
    核心:合适的地方给一个最为合理的标签
    语义化是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有很好的可读性。

    标签的属性:
    属性就是特性:比如手机的颜色与尺寸就是手机所具有的的属性
    使用html制作网页时,如果想让html标签提供更多的信息,可以使用html标签的属性进行设置
    基本格式:<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
    在上面的语法中:
    1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
    2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
    3.任何标签的属性都有默认值,省略该属性则取默认值。
    采取 键值对 的格式 key="value" 的格式
    比如:
    <hr width="400" />
    属性 是 宽度
    值 是 400


    1、网页:
    网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、
    视频以及Flash等

    2、浏览器
    浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。
    我们平时称为五大浏览器

    3、浏览器内核
    浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎
    它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,
    然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
    JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。
    最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
    有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,
    如加上没什么人使用的非商业的免费内核,可能会有10多种,
    但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。 ```
    (1)Trident(IE内核)
    国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。
    代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
    Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
    (2)Gecko(firefox)
    Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高
    ,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了,
    比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
    (3) webkit(Safari)
    Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。
    现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,
    都哭晕再厕所里面了。
    代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,
    (4) Chromium/Blink(chrome)
    在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
    ​ 大部分国产浏览器最新版都采用Blink内核。二次开发
    (5) Presto(Opera)
    Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",
    因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

    4、web标准构成
    Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。
    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
    结构标准:结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 最重要 表现标准:表现用于设置网页元素的版式、
    颜色、大小等外观样式,主要指的是CSS。 行为标准:行为是指网页模型的定义及交互的编写,主要学的是 Javascript ~。

    二、HTML基础
    1、<DOCTYPE>

    2、<html>
    作用所有HTML中标签的一个根节点。 最大的标签 根标签

    3、title文档的标题
    作用:让页面拥有一个属于自己的标题。

    4、head:文档的头部
    文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
    绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
    注意在head标签中我们必须要设置的标签是title

    5、body文档的文主体
    以后我们的页面内容 基本都是放到body里面的
    body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
    ~~~

    6、<p></p>:
    paragraph--段落
    段落标签

    7、<br>
    break--打断,换行
    换行标签,单标签
    说明:
    在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,
    就需要使用换行标签

    8、<hr/>
    horizontal--横线
    水平线标签
    定义水平线标签,单标签

    9、<span></span> 标签
    span--跨度,跨距,范围
    没有语义
    网页布局的主要盒子

    10、<div></div>标签
    division--分割,分区
    没有具体语义
    网页布局的主要盒子

    11、<b></b> 标签
    规定粗体文本

    12、<strong></strong>
    加粗表示强调(xhtml推荐使用)

    13、<em></em>
    <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说
    ,这意味着要把这段文字用斜体来显示。(xhtnl中推荐使用)

    14、<i></i>
    以斜体方式进行显示

    15、<s></s>
    文字以加删除线方式显示

    16、<del></del>
    文字以加删除线方式显示(xhtml中推荐使用)

    17、<u></u>
    以加下划线方式显示(xhtml不赞成使用u)

    18、<ins></ins>
    以加下划线方式显示

    19、<img/>标签
    image--图像
    属性 属性值 描述
    src URL 图像的路径
    alt 文本 图像不能显示时的替换文本
    title 文本 鼠标悬停时显示的内容
    width 像素(xhtml不支持%) 设置宽度
    height 像素(xhtml不支持页 设置高度
    面百分比)
    border 数字 设置图像边框的宽度

    20、<a></a>链接标签
    anchor--锚,铁锚
    html <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    属性:
    href:
    用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
    Hypertext Reference的缩写。意思是超文本引用
    target:
    用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
    格式:
    1._blank
    <a href="document.html" target="_blank">my document</a>
    浏览器会另开一个新窗口显示document.html文档
    2._self
    <a href="document.html" target="_self">my document</a>
    把文档调入当前页框
    3._top
    <a href="document.html" target="_top">my document</a>
    去掉所有页框并用
    注意:
    1.外部链接 需要添加 http:// www.baidu.com
    2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
    3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),
    表示该链接暂时为一个空链接。
    4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
    锚点定位 (难点)
    通过创建锚点链接,用户能够快速定位到目标内容。 创建锚点链接分为两步:

    1.使用“a href=”#id名>“链接文本"</a>创建链接文本(被点击的)
    <a href="#two"></a>
    2.使用相应的id名标注跳转目标的位置。
    <h3 id="two">第2集</h3>
    html中几种返回顶部的方法
    1.设置锚点链接
    2.<a href="#top" title="">TOP</a>设置属性值为#top

    21、base标签
    base--基本的
    base 可以设置整体链接的打开状态
    base 写到 <head> </head> 之间
    例:
    <img src="media/base.png" />
    把所有的连接 都默认添加 target="_blank"
    注:因为base标签的原因设置为打开方式是在新窗口中打开,则某个链接想在当前窗口打开
    则可以在此链接的标签添加元素target="_self"即可

    22、特殊字符(理解)
    html为这些特殊字符准备了专门替代的代码
    特殊字符 描述 字符的代码
    空格符 &nbsp;
    < 小于号 &lt;
    > 大于号 &gt;
    & 和号 &amp;
    ¥ 人民币 &yen;
    ..............................等等

    23、注释标签
    <!--注释语句-->
    目的:便于阅读
    关于注释几点建议:
    多写注释是非常好的代码习惯团队协作顺畅
    注释是写给队友看的,浏览器不执行注释!
    查看源代码可以看得到

    24、路径
    相对路径:
    相对路径是相对于链接的源web页面只想网站中其他文件的一个链接
    就像在地图上一样重点总是相对于起点
    “..”是返回上一级的意思

    绝对路径(基本不用)
    绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,
    意指当所有网页引用同一个文件时,所使用的路径都是一样的
    “D:webimglogo.gif”,或完整的网络地址,
    例如“http://www.itcast.cn/images/logo.gif”。

    25、无序列表(重点)
    ul= unordered list
    li = list iten
    无序列表的各个列表项之间没有顺序级别之分,是并列的。
    其基本语法格式如下:
    ```html
    <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
    </ul>
    关于列表嵌套:
    1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他
    标签或者文字的做法是不被允许的。
    2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
    3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

    26、有序列表(理解)
    ol=ordered list
    有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序
    排列定义,有序列表的基本语法格式如下:
    ```html
    <ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ......
    </ol>

    27、自定义列表(理解)
    页面底部的时候经常会用到dl来做更为适合

    定义列表常用于对术语或名词进行解释和描述,
    定义列表的列表项前没有任何项目符号。其基本语法如下:

    ```html
    <dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
    </dl>
    ```

    <img src="media/2.jpg" />

    用的还可以:

    <img src="media/mix.png" />

    关于网页中的斜杠“”和反斜杠“/”的使用问题

    问:我的操作系统中使用""作分隔符;我是不是应该用""而不是"/"?
    答:不是这样的。
    对于网页,只能使用“/(斜线)”。不要用“(反斜线)”。不同的操作系统使用不同的
    文件分隔符(如:Windows上使用“”,而不是“/”),但是在Web上,我们选择了一个
    通用分隔符,所有操作系统都要使用这个分隔符,所以不管你使用Mac,windows
    linux还是其他操作系统。在HTML的路径中都要使用“/”。


    谷歌浏览器中的一个工具toggle device toolbar 切换设备工具栏 可更改页面的显示
    select an element in the page to inspect it可以检查页面对应的元素

  • 相关阅读:
    linux网络编程之共享内存介绍
    linux网络编程之system v消息队列(二)
    一次性从git远程仓库中克隆到本地。
    返回随机数:整数、浮点数
    下载进度条
    os模块学习+open行数
    json数据处理:读取文件中的json字符串,转为python字典
    python执行命令行:python中执行shell命令行read结果
    format格式化输出
    python操作mongodb
  • 原文地址:https://www.cnblogs.com/huaweiming/p/9281090.html
Copyright © 2020-2023  润新知