HTML基础

作者: MGd | 来源:发表于2017-02-09 19:07 被阅读19次

浏览器功能

  • 1.将网页渲染出来给用户查看
  • 2.能够让用户通过浏览器与网页交互

    世界五大浏览器

  • 1.谷歌
  • 2.IE
  • 3.搜狐
  • 4.欧鹏
  • 5.safari

什么是服务器

-专门存储数据的24小时不关机的超级计算机,服务器一旦关机,访问者就无法访问。

浏览器请求数据过程

  • 1.浏览器向服务器发送请求报文
  • 2.服务器接收请求报文,进行处理
  • 3.服务器将处理的响应报文返回给浏览器
  • 4.浏览器解析返回的结果,将结果渲染出来
  • 请求报文组成:请求行+请求头+空行+请求体
  • 响应报文组成:响应行+响应头+响应体

什么是URL

-URL就是我们在浏览器中输入的地址

  • 格式:http://127.0.0.1:80/index.html (完整格式,浏览器会自动补全http:和:80)
    --------协议类型://ip地址:端口号/资源路径.资源名称

HTTP协议

-Hypertext Transfer Protocol的缩写,超文本传输协议
-HTTP协议通俗讲来说,就是规范/约束浏览器和服务器之间如何沟通。

其他知识

-查看文件扩展名(.txt .html .png等)
-纯文本文件:可以被记事本打开,并且能够正常显示的文件。

什么是HTML

-HyperText Markup Language的缩写,超文本标记语言

HTML的作用
  • HTML就只有一个作用, 它是专门用来描述文本语义的,也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落。

HTML发展史

发展史.png

网页的固定格式

    基本结构:
     <html>
           <head>
               <title></title>
           </head>
           <body>
           </body> 
     </html>     
html标签
  • 作用:
  • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档。
  • 注意:
  • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间
head标签
  • 作用:
  • 用于给网站添加一些配置信息
  • 注意:
  • 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到。
title标签
  • 作用:
  • 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
  • 注意:
  • title标签必须写在head标签里面
body标签
  • 作用:
  • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

head的内部标签

meta标签

-在head内部添加单标签<meta charest="UTF-8"/>,title标签中的标题显示就不会乱码。

DTD文档声明

  • 什么是DTD文档声明:
  • 由于HTML有许多版本规范,所以想让浏览器正确渲染/解析/编译我们的网页,我们需要在HTML文档的第一行告诉浏览器我们的网页是用那个版本规范的,这样浏览器就能正确渲染/解析/编译我们的网页。
  • 格式:
  • <!DOCTYPE html>
  • 注意:
  • 必须是 HTML 文档的第一行,位于 <html> 标签之前
  • 不是 HTML 标签
  • 没有结束标签
  • 没有大小写之分

WebStorm

  • 基础快捷键:
  • 创建一个新的.html的文件
    同时按下键盘上的Ctrl + Alt + Insert
  • 让光标移动到当前行的末尾
    按下键盘上的End键
  • 让光标移动到当前行的最前面
    按下键盘上的Home键
  • 多行编辑
    按住Alt键不放, 再按住鼠标的左键不放, 然后再拖动鼠标。
  • 复制光标所在的那一行
    Ctrl + D
  • 删除光标所在的那一行
    Ctrl + X
  • 如何在WebStorm中让标签包裹一段内容, 也就是自动在一段内容前后加上标签。
    按下键盘上的Ctrl + Alt + T, 然后按下回车, 然后输入对应的标签

基础标签学习

  • H系列标签
  • 作用:给文本添加标题语义
  • 格式:
    <h1>xxxxxxx</h1> (一共6个)
  • P标签
  • 作用:给文本添加段落语义
  • 格式:
    <p>xxxxxxx</p>
  • Hr标签
  • 作用:显示一条分割线
  • 格式:

相关文章

网友评论

    本文标题:HTML基础

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