HTML与css入门总结

HTML：超文本标记语言，超文本指的是超链接，标记指的是标签，这是一种由一个个标签组成的制作网页的语言。

HTML基本结构：

<!DOCTYPE html>
<html>
    <head>
        <metacharset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明；

第二行与最后一行的<html>标签与</html>定义了html文档的整体；

<head>标签和<body>标签是第一层子元素，<head>标签负责网页的一些设置及定义标题，包括定义网页编码格式，外链css样式文件跟js文件这些，设置内容不会显示在网页上，标题内容显示在标题栏，<body>里面编写网页上显示的内容。 html创建快捷键：！+tab键

--------------------------

标题标签：

会从大到小一层层显示其标题

段落标签：表示文档的一个文字段落，具有块元素基本特性，含有默认外边距

段前与段尾分别加<p>

--------------

通用块容器标签：表示文档一块内容，具有块元素特性，无其他默认样式

段落前后分别加<div>与</div>

---------------

常用的内联标签

1：超链接标签，链接到另一个网页，默认文字蓝色，有下划线。

<a href="./03----标题标签.html">标题链接标签</a>

百度的链接</a>

2：图片标签，在网页中插入图片，支持宽高设置，具体格式为：

这个 src 后面跟的是我们图片保存的位置，alt后面跟的是图片显示不出来时的提示信息。

一些其他常用的功能标签

1：换行标签

<br>因为虽然我们编写时换行了，但在网页显示时它是默认不会换行的，这时可以用<br>标签，在此处跳到下一行。

2：注释标签

这里可以直接用Ctrl + / 快捷键实现

字符实体

1：空格的字符实体

&nbsp这个代表一个空格实体

2：“< >”的字符实体

在网页上显示“< >”时可能会被误认为标签，我们想要在网页上显示出它们可以用它们的字符实体 “<”是&It “>”是&gt

标签语义化

带语义的标签

1、h1~h6：表示标题

2、p：表示段落

3、img：表示图片

4、a：表示链接

不带语义的标签

1、div：表示一块内容

2、span：表示行内的一块内容

---------------------------------------

css：为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 CascadingStyle Sheets的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁

css的基本语法

定义方法是：选择器 { 属性：值；属性：值；属性：值；}

示例：

div{
    width:100px;
    height:100px;
    background:gold;
}

css引入方式

内联式；嵌入式；外链式。

外链式是通过link标签链接外部样式文件到页面中，较好用。

css属性入门

布局常用样式属性

Width 元素标签宽度

Height 元素标签高度

Background 元素背景色或背景图片

Border 元素四周边框

border:1px solid black;设置元素四周边框是1像素宽的黑色实线

border也可以分别设置四个边的

Border-top 顶边边框

Border-top：10px soild red

定边是10像素宽的红色实线

后面left right bottom 分别对应左右底三边边框

Padding：元素包含的内容与元素边框的距离，即内边距。

padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。

margin：元素与外界的距离，即外边距

margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。

文本常用样式属性1

color：文字颜色

Font-size：文字大小

Font-family：文字字体

Font-weight：文字是否加粗 bold加粗；normal不加粗

Line-height：文字行高

Text-decoration：文字下划线后面加none表示把下划线去掉

猜你喜欢