찾다
웹 프론트엔드HTML 튜토리얼Summary—【base】(HTML) - 小花大方

Html知识点:

1. 建议开发人员计算机基本配置

  a) 显示所有文件的后缀名*

  b) 文件的排列方式改为详细信息,并且名称一定要能够全部显示出来

  c) 使用小的任务栏

  d) 将常用的工具锁定到任务栏中

 

2. 浏览器与服务器

  a) 浏览器与服务器之间存在交互关系

  b) 浏览器的内核又被称之为渲染引擎

  c) 目前比较主流的浏览器内核:

TridentIE、猎豹浏览器、360浏览器、极速安全浏览器

GeckoFirefox

WebKitSafari

Blinkchrome opera

参考http://blog.sina.com.cn/s/blog_6b2fcbbc0102uz1g.html

 

  d) 浏览器与服务器之间进行交互时要经过

    i. 浏览器发送请求报文

    ii. 服务器处理请求报文,并返回响应报文

    iii. 浏览器处理响应报文,并进行从上到下解析渲染

参考http://www.cnblogs.com/biyeymyhjob/archive/2012/07/28/2612910.html

 

  e) 服务器的基本能力:服务器要具备承担服务并保障服务的能力

  f) 浏览器的作用: 浏览器是个显示网站服务器或文件系统内的文件,并让用户与此些文件交互的一种应用软件

  g) 浏览器发送到服务器中请求报文的查看方法

    i. 在网页中右键选择审查元素,审查元素中找到Network,在network中找到headers,headers中查看请求报文的具体信息

请求报文具体信息的查看:

http://jingyan.baidu.com/article/bea41d437e65bab4c51be6e5.html

 

3. 请求协议(http超文本传输协议)

  a) 请求协议包括请求报文、响应报文和URL

  b) 其中URL又分为协议名、服务器IP端口号及请求的页面

 

4. 文件后缀名和打开方式:

  a) 修改文件后缀名,文件的内容不会发生任何改变

  b) 后缀名是用来决定文件的打开方式的

  c) 修改某种后缀名的打开方式步骤: 文件右键-打开方式-勾选所有的该类程序都已这种方式打开-确定

 

5. 超级文本标记语言HtmlHyperText Markup language

  a) Html一种在浏览器上运行的一种标记语言

  b) Html的作用就是给文本加上含有语义的标签

  c) 结构:

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">meta</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

  d) Html中所有的标签都是用包裹起来的

  e) 文档:htmlXhtml ,html5

 

6. 标签

拓展:Html5标签语义

http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/

  a) H系列标签

    i. 作用:某段话以标题的形式显示

    ii. H系列标签包括{ h1、h2、h3、h4、h5、h6 }

    iii. 一个页面中只能有一个h1标签

  b) P标签(段落标签)

    i. 作用:使某一行文字成为一个段落

    ii. P标签默认独占整行,与上下内容之间存在距离

  c) Hr标签

    i. 作用:页面中显示一条横线

    ii. Hr标签默认占整行

  d) Br标签

    i. 作用:页面中进行换行

  e) Strong标签

    i. 作用:突出某段话的重要性,加重段落语气

  f) Ins标签

    i. 作用:文本加上下划线

  g) Em标签

    i. 作用:突出某个词或短语的重要性,用于加重段落中比较重要的内容语气

  h) Del标签

    i. 作用:文本加上删除线

  i) 不建议使用的标签{b、u、is}

  j) Img标签

    i. 作用:页面中显示一张图片

  k) a标签

    i. 作用:超链接到其他网页

    ii. 超链接到本网页中的某个位置(锚点)

    iii. 不跳转(#)

    iv. 跳转到其他网页中的某个位置

    v. 可以进行下载(不推荐)

 

7. Sublimewindows中常用的快捷键 在这里不一一列举了

  a) Ctrl+A/Ctrl+S/Ctrl+C/Ctrl+V等

8. 绝对路径与相对路径

  a) 绝对路径:带有盘符的路径,相对于计算机来查找文件的

  b) 相对路径:没有盘符的路径,相对于当前页面来查找文件的

9. 标签之间的关系

  a) 嵌套关系:一个标签包裹着另一个标签,那么这两个标签则是嵌套关系

  b) 并列关系:一个标签与另一个标签是并列的,那么这两个标签则是并列关系

  c) 在嵌套关系中,注意标签的缩进,并不是一定要进行缩进,但是缩进会利于对代码的维护

10. Html标签

  a) 在html中无论同时出现了多少个空格、缩进、换行都默认为一个空格

  b) 一个完整的网页应该由开始,由结束 (!DOCTYPE是声明文档类型的)

  c) Html标签也被称为根节点标签

11. Head标签

  a) Head标签用来存放title,meta,link,style,script,base标签的,其中title是必须要写的标签

  b) Head中的title标签是为网页添加标题的标签

  c) Head中的Meta标签是优化页面SEO,可以设置页面所使用的字符集和页面关键字,页面描述等

    1. Description可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。

    2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)

    3. 字符集(编码格式):

<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html;charset=UTF-8"</span><span style="color: #0000ff;">></span><span style="color: #000000;">

Charset(字符集的格式):UTF-8.</span></span>

  注意:字符集(文字在电脑是存储的字典):

  电脑是不能直接存储文字的,一般情况下电脑存储的是这个文字在“字典”里对应的位置。

      gb2313---->gbk;

     国标2313---->国标扩

 

  d) Head中的base标签是设置页面中所有a标签的属性的

  e) Head中的style标签是设置页面中的css

  f) Head中的script标签是用来设置页面中的JavaScript

  g) Head中的link标签是用来设置外部文件的

12. Body标签

  a) Body标签是用来存放所有html标签的

  b) Body标签是html页面的主体

 

13. 字符集

  a) 字符集包括gb2312和UTF-8

  b) Gbk(国标扩)是gb2312(国标)的扩充

  c) GBK收录了所有的中文和片假名,并且每个中文占2字符

  d) UTF-8收录了世界上所有的语言,并且每个中文占3字符

  e) 因此UTF-8的性能要比GBK

  f) 根据网页所面向的国家不同,选择不同的字符集

14. 列表

  a) 无序列表

    >标签

        i. 用于表达没有顺序的数据

        ii. 无序列表中的数据用

  • 标签包裹

        iii. 

      标签中只能包裹
    • 标签

        b) 有序列表

        标签

            i. 用于表达有顺序的数据

            ii. 无序列表中的数据用

      1. 标签包裹

            iii. 

          标签中只能包裹
        1. 标签

            c) 自定义列表

              i. 用于表达自定义的数据,W3C中是dl>标签定义了定义列表

              ii. 自定义标签只能包裹dt>标签

          标签

              iii. Dt是设置列表的子标题的

              iv. Dd设置列表中的数据的

          15. 表格table标签

            a) 表格标签完整结构

              i.

          <span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">caption</span><span style="color: #0000ff;">><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">th</span><span style="color: #0000ff;">></span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;"> tr </span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">td</span><span style="color: #0000ff;">></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span>

              ii. Caption标签是设置表格标题的

              iii. Thead标签是包裹表头的

          标签标签

              iv. Tbody标签是包裹表格内容的标签和标签

              v. Tr标签表示行,th标签和td标签表示列

              vi. Tfoot标签表示表格底部的备注

          16. 表单form

            a) 表单的作用:用来收集某些信息的

            b) 所有的表单要放到form标签中

            c) 表单的种类

              i. text属性:输入框

              ii. password属性:密码框

              iii. hidden属性:隐藏域

              iv. radio属性:单选框

              v. checked属性:默认属性

              vi. checkbox属性:多选框

              vii. button属性:按钮

              viii. image属性:图片按钮

              ix. reset属性:重置所有表单中的填写信息

              x. subm

              it属性:提交数据

              xi. selected属性:设置默认显示(适用radio标签和selectbox标签)

              xii. select标签(标签),创建一个下拉框

              xiii. option标签,设置下拉框中的内容

              xiv. multiple属性:设置下拉框为列表框

              xv. textarea文本域,创建一个文本域

          17. 没有语义的标签div和span

            a) Div是与CSS调整网页布局的

            b) Div标签是独占行的

            c) Span标签是辅助div进行网页布局的

            d) Span标签是没有宽和高的

            e) Span 标签的宽和高由span中的内容决定的

          18. 注释

            a) Html中的注释以结束

            b) Html中注释不可以叠加使用

          19. 字符实体

          特殊字符

          描述

          字符代码

           

          空格

           

          >

          小于号

          大于号

          >

          &

          和号

          &

          人民币

          ¥

          ©

          版权

          ©

          ®

          注册商标

          ®

          °

          摄氏度

          °

          ±

          正负号

          ±

          ×

          乘号

          ×

          ÷

          除号

          &divde;

          ²

          平方

          ²

          ³

          立方

          ³

      2. 성명
        본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
        HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

        웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

        HTML의 미래 : 웹 디자인의 진화 및 트렌드HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

        HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

        HTML vs. CSS vs. JavaScript : 비교 개요HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

        웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

        HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

        Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

        HTML : 웹 페이지 구조 구축HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

        HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

        텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

        HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

        HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

        WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

        HTML의 역할 : 웹 컨텐츠 구조HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

        HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

        See all articles

        핫 AI 도구

        Undresser.AI Undress

        Undresser.AI Undress

        사실적인 누드 사진을 만들기 위한 AI 기반 앱

        AI Clothes Remover

        AI Clothes Remover

        사진에서 옷을 제거하는 온라인 AI 도구입니다.

        Undress AI Tool

        Undress AI Tool

        무료로 이미지를 벗다

        Clothoff.io

        Clothoff.io

        AI 옷 제거제

        AI Hentai Generator

        AI Hentai Generator

        AI Hentai를 무료로 생성하십시오.

        뜨거운 도구

        MinGW - Windows용 미니멀리스트 GNU

        MinGW - Windows용 미니멀리스트 GNU

        이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

        드림위버 CS6

        드림위버 CS6

        시각적 웹 개발 도구

        WebStorm Mac 버전

        WebStorm Mac 버전

        유용한 JavaScript 개발 도구

        ZendStudio 13.5.1 맥

        ZendStudio 13.5.1 맥

        강력한 PHP 통합 개발 환경

        메모장++7.3.1

        메모장++7.3.1

        사용하기 쉬운 무료 코드 편집기