day_01

最新推荐文章于 2024-07-25 16:45:46 发布

sinat_33410261

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量804

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/sinat_33410261/article/details/121912709

版权

第一阶段、css3/html5

1.浏览器内核

浏览器的渲染引擎，作用时解析我们的代码
五大浏览器，自主研发内核
1.谷歌：webkit > blink
2.微软IE: trident
3.苹果Safari: webkit
4.欧朋：presto > blink
5火狐：gecko(高版本兼容webkit)
6.360 猎豹搜狗（双内核：blink + trident)

2.网页三层结构

html-结构层–拥有什么
css-表示层–拥有的东西什么样子
js-行为层–用户的行为

html定义：超文本标记语言，不是编程语言

html基本结构

<!-- shift + 1 打出 ! 直接回车 -->
<!-- 注释的写法 ctrl + / --> 

<!-- 声明文档类型，告诉浏览器以哪种规范来解析文档，这是Html5的写法，不是标签，写在文档最上方 -->
<!DOCTYPE html>
<!-- html是文档最大的标签 -->
<html lang="en">
<head>
   <!-- head 包含元信息，css样式属性，js语言，标题 -->
   <!-- 字符编码
       gb2312 中文简体
       GBK 中文简体&繁体
       UTF-8 万国码，中文，英文，西班牙语，日文，韩文，法语 -->
   <meta charset="UTF-8">
   <!-- 窗口信息配置 -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 标题 -->
   <title>你好</title>
</head>
<body>
   <!-- body 身体部分，包含所有页面呈现的结构标签 -->
</body>
</html>

3.常用标签

常用块级标签及特点

<div></div> 块级标签
<p></p> 段落标签
h1-h6 标题标签
特点：垂直上下排列，独立成行

常用内联标签及特点（行内标签）

<span></span>
特点：默认在一行排列，超出一行会折行

| <b>      | 定义粗体文本 |
| <strong> | 定义加重语气 |
| <i>      | 定义斜体字   |
| <em>     | 定义着重文本 |
| <sub>    | 定义下标字   |
| <sup>    | 定义上标文字 |
| <del>    | 定义删除文本 |
| <br>     | 换行标签 |
| <hr>    | 水平分割线 |

4.列表

1.无序列表

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>Js</li>
</ul>

**效果**
● HTML
● CSS
● Js

type属性定义列表符号样式：

disc(实心圆)
circle(空心圆)
square(实心方块)

2.有序列表

<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>Js</li>
</ol>

**效果** 
1. HTML
2. CSS
3. Js

3.自定义列表

<dl>
	<dt>HTML</dt>
	<dd> 超文本标记语言 </dd>
	<dt>CSS</dt>
	<dd> 层叠样式表 </dd>
</dl>

**效果**
HTML
	超文本标记语言
CSS
	层叠样式表

**注意：列表项内部均可以使用段落、换行符、图片、链接以及其他列表等等。

5.图像标签

<img src="" alt="">

src 图片的路径
width 图片宽度（当只设定宽度时，高度会等比例缩放）
height 图片高度
alt 友好提示
title 标题，鼠标悬浮时显示

相对路径和绝对路径：

1.相对路径：由这个文件所在位置为参考基础

        ./ 当前目录
        ../ 上级目录
        ../../  上上级目录 以此类推
<img src="../images/2.webp" alt="">

2.绝对路径：文件在目录中的绝对位置完整描述

<!-- 绝对路径 网络地址，本地磁盘 -->
  <img src="D:\下载.jpg" alt="">
  <img src="https://img2.baidu.com/it/u=1945464906,1635022113&fm=26&fmt=auto" alt="">

6.超链接 a标签

<!-- 超链接 href 地址
target _self 默认在当前页面跳转
       _blank 在新页面打开-->
  <a href="https://www.baidu.com/" title="跳转到百度">跳转到百度</a>
  <a href="https://www.mi.com/" target="_blank">跳转到小米</a>

超链接类型

1）空链接

如果当时没有确定链接的目标时使用空链。

示例：

<a href="#" > 商品 </a>

2）锚点链接

当我们点击锚点链接时，可以快速定位到页面中的某个位置。

l 同一页面的指定位置。

示例：

目标：<p id="box"></p>
锚点超链接：<a href="#box"></a>
或者：

<a href="#p1">出师表</a>


<a href="#" name="p1"></a>
<p>1出师表/前出师表

    【作者】诸葛亮 【朝代】三国时期 译文对照
    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>

7.标签之间的关系

我们在书写div标签时通常有两种结构：并列结构和嵌套结构。

<!-- 并列结构（兄弟关系） -->
  <div>我是div</div>
  <p>我是p标签</p> 

  
  <!-- 嵌套结构（父子关系） -->
  <div>我是div
    <p>我是p标签</p>
    <img src="../images/3.webp" alt="">
    <span>我是span</span>
  </div>

8.字符实体

  <!-- 小于号 -->
  1&lt;3
  
  <!-- 大于号 -->
  3&gt;1
  
  <!-- 空格 -->
  你&nbsp;&nbsp;&nbsp;好
  
  <!-- 版权符号 -->
  &copy;
  
  <!-- 已注册 -->
  &reg;
  
  <!-- 商标 -->
  &trade;

9.语义化

概念：运用合适的标签和特定的属性去格式化文档（合适的场合用合适的标签和属性，合适的标签和属性用在合适的场合）
优点：
易于开发和维护
用户体验比较好
易于SEO,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通
即使在没有css样式的情况下，也能呈现良好的效果

sinat_33410261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day_01

第一阶段、css3/html51.浏览器内核浏览器的渲染引擎，作用时解析我们的代码五大浏览器，自主研发内核1.谷歌：webkit > blink2.微软IE: trident3.苹果Safari: webkit4.欧朋：presto > blink5火狐：gecko(高版本兼容webkit)6.360 猎豹搜狗（双内核：blink + trident)2.网页三层结构html-结构层–拥有什么css-表示层–拥有的东西什么样子js-行为层–用户的行为html
复制链接

扫一扫