初识HTML5

最新推荐文章于 2022-10-18 22:29:45 发布

@西楚霸王

最新推荐文章于 2022-10-18 22:29:45 发布

阅读量229

点赞数

分类专栏：初识HTML5 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_41027812/article/details/108183080

版权

初识HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识HTML5

web的发展史

web1.0 时代：简单的静态页面早期三大门户搜狐新浪网易
web2.0时代：更注重用户之间的交互用户即是信息的消费者也是制造者微博
web3.0时代：人工智能、复杂的页面功能、即时通讯
web的前景：pc端的网页、移动端的网页、ios android

vscode编译器的使用

快捷键

复制本行到下一行 shift+alt+↓
复制本行到上一行 shift+alt+↑
查找 ctrl+F
替换 ctrl+H
同时写多行 alt+鼠标左键可以出现多个光标(按下鼠标滑轮向下拉)
同时选中多个相同的 ctrl+D

浏览器内核

浏览器的渲染引擎，作用是解析我们的代码
五大浏览器，自主研发内核
谷歌chrome 火狐mozilla 欧朋opera 微软IE 苹果safari
webkit>blink gecko 高版本兼容webkit presto>blink trident webkit
blink是webkit的分支
360 猎豹搜狗 QQ浏览器（双内核：blink+trident）

谷歌chrome	火狐mozilla	欧朋opera	微软IE	苹果safari
webkit>blink	gecko 高版本兼容webkit	presto>blink	trident	webkit

网页三层结构

html(Hyper Text Markup Language)-结构层
css(Cascading Style Sheets)-表示层
js(JavaScript)-行为层

html定义

html(Hyper Text Markup Language) 超文本标记语言，不是编程语言

html基本语法

<div>
	 内容
	<div>
		内容
	</div>
</div>'

正常在这里插入代码片的标签的结构是：关键字开头，关键字结尾。开始标签开始，结束标签结束
特殊的标签：空标签 img input等
空标签在开始标签中就结束了，所以不需要结束标签

html基本结构

  <!DOCTYPE html>
  <!-- 声明文档类型，告诉浏览器以哪种规范来解析文档，这是html5的写法，不是标签 -->
  
  <!-- 最大的标签 -->
  <html lang="en">
  <!-- 头部 -->
  <head>
      <!-- 写一些元信息，css样式属性，调用js -->
      <!-- 文档的编码格式
      gb2312 中文简体
      GBK 中文简体和繁体
      UTF-8 万国码，包含大部分国家都可以解析，中文，日文，韩文 -->
      <meta charset="UTF-8">
      <!-- 设置设备窗口信息 -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 文档的标题 -->
      <title>Document</title>
  </head>
  <!-- 身体 -->
  <body>
      <!-- 包含所有其他的一些结构标签 -->
      <div></div>
  </body>
  </html>

常用标签及其特点

块级标签
- div
- p
- ul>li(无序列表)
- ol>l(有序列表)
- h
- dl>dt>dd(自定义列表)
特点
- 独占一行，能设置width，height，margin和padding等属性
内联(行内)标签
- span(常用的行内标签，用户图标)
- strong(加粗,语义化标签)
- b(加粗)
- em( 斜体,语义化标签)
- i(斜体)
- sub(定义下标字)
- sup(定义上标字)
- del(删除线)
- s(删除线)
- ins(下划线)
- u(下划线)
特点
- 在一行内显示（在一行中可以并列多个行级标签），不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。
内联(行内)块标签
- img
- button
- input
- textarea(文本域)
特点
- 在一行内显示（在一行中可以并列多个行内块标签），可以设置宽高、adding和margin，有白色间隙。
其他标签
- hr
- br
图像标签
- src 图片的路径
- width 图片宽度（当只设定宽度时，高度会等比例缩放）
- height 图片高度
- alt 图片不显示时提示的内容
- title 标题，鼠标悬浮时显示
路径
- 绝对路径
  网络路径 http:// https://
  本地磁盘路径 C:/Users/Desktop/图片/img1.jpg

相对路径
- 同级目录 ./(可省略)
- 上级目录 …/
- 根目录 /
a标签
- href 链接的路径

<a href="https://www.baidu.com" target="_blank">百度</a>
//在空白页打开
<a href="http://www.jd.com" target="_self">京东</a>
//在当前页打开   默认
<base target="_blank">
//改变当前文档所有链接默认打开方式
<a href="./demo.zip">demo</a>
//跳转到指定页面
<a href="./demo.html">hello</a>
//下载指定文件

局部链接

    <a href="#a">你</a>
    <a href="#b">我</a>
    <a href="#c">他</a>
    <h3 id="a">你</h3>
    <p>
       你你你你你你你你你你你你你你你你你你你你你你
       你你你你你你你你你你你你你你你你你你你你你你
       你你你你你你你你你你你你你你你你你你你你你你
       你你你你你你你你你你你你你你你你你你你你你你
       你你你你你你你你你你你你你你你你你你你你你你
       你你你你你你你你你你你你你你你你你你你
    </p>
    <h3 id="b">我</h3>
    <p>
        我我我我我我我我我我我我我我我我我我我我我
        我我我我我我我我我我我我我我我我我我我我我
        我我我我我我我我我我我我我我我我我我我我我
        我我我我我我我我我我我我我我我我我我我我我
        我我我我我我我我我我我我我我我我我我我我我
        我我我我我我我我我我我我我我我我我我我我我
    </p>
    <h3 id="c">他</h3>
    <p>
        他他他他他他他他他他他他他他他他他他他他他他
        他他他他他他他他他他他他他他他他他他他他他他
        他他他他他他他他他他他他他他他他他他他他他他
        他他他他他他他他他他他他他他他他他他他他他他
        他他
    </p>
     <a href="#">hello</a>
     //点击空链接，相当于重新刷新页面

文字链接+图像链接

	<a href="https://www.baidu.com">
		<img src="C:/Users/Desktop/图片/img1.jpg" alt="">
	</a>

语义化

什么是语义化？

使用合适的标签和特有的属性去格式化文档
- 易于开发和维护
- 用户体验比较好
- 易于seo，易于爬虫抓取关键字，和搜索引擎建立良好的沟通
- 即使没有css，也能呈现出良好的效果

html字符实体

https://www.w3school.com.cn/html/html_entities.asp

@西楚霸王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识HTML5

初识HTML5web的发展史web1.0 时代：简单的静态页面早期三大门户搜狐新浪网易web2.0时代：更注重用户之间的交互用户即是信息的消费者也是制造者微博web3.0时代：人工智能、复杂的页面功能、即时通讯web的前景：pc端的网页、移动端的网页、ios androidvscode编译器的使用快捷键复制本行到下一行 shift+alt+↓复制本行到上一行 shift+alt+↑查找 ctrl+F替换 ctrl+H同时写多行 alt+鼠标左键
复制链接

扫一扫