HTML_01

不会敲代码呀～

已于 2022-04-03 14:04:56 修改

阅读量148

点赞数

文章标签： html5

于 2022-03-31 16:03:50 首次发布

本文链接：https://blog.csdn.net/m0_67509637/article/details/123873477

版权

1. IDE: 集成开发环境

例如：学 Java 用的 eclipse,idea.

学习前端的集成开发环境： dreamweaver, Hbuilder 国人的， vscode (MS). webstorm （专写 js ） .....

前端的运行环境时浏览器：开发浏览器： chrome/firefox: firebug 插件

2. HTML: 超文本标记语言

标记：元素：标签

HTTP: 超文本传输协议

2. 2 HTML结构

2.2.1 文档头：<!DOCTYPE html> ： HTML5代

HTML4: 的文档头分类三种：

: 过渡：又浏览器容错 :

transitionsal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

---------

strict:: 严谨的，严格的格式：不按规则写就报错 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

---------

frameset: 框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">

2.2. 2 文档树：

2.2.3 head:

meta: 元：当前文档的一些信息。例如：字符集 , 网站关键词，描述，视口等等

title: 标题： tab 显示的内容，收藏夹默认。又长度限制

2.2.4 Body: 网页的主体。

3. XML: 可扩展标记语言：

特点：

只有一个跟节点

合理嵌套

属性值要双引号

用途：传输数据，存储数据。 JSON 替代了 XML

<?xml version="1.0" encoding="UTF-8"?>

<students>

<student id = "1" >

<name> tom </name>

<age value = "10" ></age>

</student>

<student id = "2" >

<name> jerry </name>

<age>

<value> 11 </value>

</age>

</student>

</students>

4. Body标签，标记，元素

bgcolor: 背景色,不推荐用，推荐用style样式
background: 背景图片属性。推荐用style样式

<body style = "background-color: rgb(255,0,0);" >

</body>

通常用样式设置背景

<body style = "background-image: url('/imgs/b2.webp');

background-repeat: no-repeat;

background-size: cover;" >

<h1> hello world </h1>

</body>

相对路径问题

要访问的目标： http://127.0.0.1:5500/imgs/b2.webp

当前路径： http://127.0.0.1:5500/lesson01_html01/lesosn1_body.html

1. background=" http://127.0.0.1:5500/imgs/b2.webp " 绝对路径

2. background="../imgs/b2.webp" 相对路径 ../ 退一级目录

3. background="/imgs/b2.webp" 相对路径 / 开头网站根目录

body 默认外边距 8px ：

px像素：点（1200`X 800 ）横向 1200 个点，纵向 800 个点。一点就是 1px

5.标题 h1 ~ h6

5.1 h1: 一级标题

h1 {

display : block ; /* 块 */

font-size : 2em ;

margin-block-start : 0.67em ;

margin-block-end : 0.67em ;

margin-inline-start : 0px ;

margin-inline-end : 0px ;

font-weight : bold ;

}

5.1.1 display: block; 块级元素

前后换行

宽度是 100%

没内容的块？？

5.1.2 font-size: 2em

文字大小：

em: 倍数默认字体大小 16px 的倍数 ;; 2em=32px;

5.1.3 font-weight: bold;

文字的粗细。

5.1.4 margin

block 开始结束：上下； margin-top/bottom

行的开始结束：左右 : margin-left/right

0.67em: 16*2 * 0.67 == 21.44 px

hello wo

rld

<h1> hello world </h1>

hello world

1111

<hhh style = "display: block;background-color: red;font-size: 2em;font-weight:

bold;

margin-top: 0.67em;margin-bottom: 0.67em;" >

hhell l;adsfjalks

</hhh>

2222

3333

6 hr 分割线

display : block ;

unicode-bidi : isolate ;

margin-block-start : 0.5em ;

margin-block-end : 0.5em ;

margin-inline-start : auto ;

margin-inline-end : auto ;

overflow : hidden ;

border-style : inset ;

border-width : 1px ;