day001学习内容

最新推荐文章于 2024-07-31 19:17:15 发布

我超烂的哦~

最新推荐文章于 2024-07-31 19:17:15 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/TerribleQi/article/details/114459340

版权

本文详细介绍了HTML的基本概念，包括HTML的标记如文本、布局、图片，以及浏览器的常见内核如Trident、Gecko、Blink等。还讲解了如何创建HTML文档，强调了文档声明、注释、段落、标题、高亮等元素的使用，并探讨了HTML在网页结构中的重要性。此外，提到了超链接的设置和图片属性的配置。

摘要由CSDN通过智能技术生成

day01

常见浏览器及其内核
html语言是什么
html怎么写
html文档怎么创建？固定模板？
html标记【文本标记，布局标记，图片】

常见浏览器以及内核(常识)

内核：渲染引擎(css+html) js引擎(javascript)

常见：指的是自主研发内核的浏览器

浏览器	内核
IE	Trident
Firefox（开源）	Gecko
Chrome	Webkit–>Blink
Safari	Webkit
Opera	Presto —>Blink

HTML语言

**角色：**三大要素之一负责体现网页上面有什么 (负责结构)

是什么？

HTML: Hyper超Text文本 Markup标记 Language 语言

Hyper:超 1. 超越文本 .txt 只写文字插入图片，链接，文字(段落，标题) —> .html网页

                2. 超文本协议

标记:

规范；死的定义好的 w3c组织

图片 img

链接 a

段落 p

标题 h1~h6

双标记

<标记名字  属性1="属性值"  属性2="属性值">标记内容</标记名字>
开始标记          结束标记

<p>文本内容</p>

单标记

只开始  不结尾 
<标记名称  属性1="属性值"  属性2="属性值">
<img src="" alt="">
    
    src="图片地址"
    alt="显示的文字"

标记(标签，元素，对象)

双截伦

html文件由多个标记嵌套形成的 —》网页，文档

创建网页文档

新建一个.html文件 (文件名字一般小写字母，数字下划线)

关于我们页面 about_us 或者 aboutUs

模板

包含一些对网页文档执行时的设置

快捷键: !+enter

1.文档声明

<!DOCTYPE html> h5的文档说明，必须放在.html第一句 不是个标记  意在告诉浏览器以什么版本解析文档

注释 ctrl+/

html注释

css注释 /**/

编程语言:

单行注释 //

多行注释 /**/

父子后代关系

嵌套: 父子关系

兄弟关系

平行

常见标签

一、文本相关的标记

1、加粗b or strong（no）

<b>文字</b>  没有语义的标记

<strong>文字</strong>  语义标记

2、斜体(no)

<i>斜体文字</i>没有语义的标记
<em>斜体文字</em> 语义标记

3、下划线(no)

 <u>文字</u>没有语义的标记
<ins>文字</ins> 语义标记

中划线 (no)

<s></s>没有语义的标记
<del>￥99.00</del>语义标记

4、换行（no）

5、水平线（no）

<hr width=""  color="" align="对齐方式 left /right /center"  a="1">
width,color,align 自带属性 ，默认属性
a 自定义属性

6、字符实体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1xobG04-1615039068311)(media/常用字符编码.png)]

¥人民币符号

7、段落标记

作用：装一行或者多行文字

<p>装一行或者多行文字<br>装 一行或者多行文字</p>

8、标题(语义标记)

<h1>标题名称</h1>
<h2>标题名称</h2>

结论:

一张网页有且只有一个h1 （权重太大）
建议h3以下少用

9、h5新增的高亮标记

<mark>高亮显示</mark>

二、布局相关的标记

大容器，大区域 division  

<div>
    图片+p+小盒子 +背景图 +音视频
</div>

小区域，小容器 span
<span>
    几个字
</span>

特点：

div 一行一个独立成行默认宽度占满父元素的宽度区域
span 宽高取决于内容并排
p ,hi一行一个独立成行默认宽度占满父元素的宽度区域

三、图片标记

<img src="" alt="" title="">
src:
alt:
title:

src属性:

图片的路径，地址

绝对路径：1. 网络路径 2. 本地路径 (D:/a/b/.png)

相对路径(常用)

从你当前.html出发去找那个图片

alt:

当图片加载失败的时候的文本提示

title：

鼠标移入图片时的文本框

width:宽度

height：高度

四、超链接标记

链接新页面

<a href="" target="">
  文字/图片/div盒子链接
</a>

href="目标地址"

target="打开方式"  _blank新页/_self 本页(默认值)

锚点链接

跳转到某一页面的某一个部分

抛下去一个唯一标识id=""
在a链接的 href="#id值"

base标记

必须设置到head里作用：一次性设置a链接的打开方式和基础地址 —》减少冗余