html前端制作,web前端简易制作之HTML

1.文章标题

这里可以看出在

那么生成的html文件 名称就叫做hello world

2.文本标签

HTML:表示该文件为HTML文件

HEAD：包含文件的标题，使用的脚本，样式定义等

BODY:放置浏览器中显示信息的所有标志和属性，其中内容在浏览器中显示。

1.标题标签：h1-----h6 表示的是标签的大小 其中h1最大，h6最小。

2.段落标签：p-------p 段落之间会空一行

3.加粗标签：b/strong 加粗字体

4.下划线标签：u

5.删除标签：s

6.预格式化文本标签(保留文本的原有格式)：pre标签

7.上标和下标：sup，sub

8.块引用标签：blockquote

9普通的文本：span-----行内标签

10.普通的文本标签：div-----

以上标签都是成对出现的

比如：

换行标签：br-----(第一个没有成对出现的标签)

水平分隔符标签：hr-----(第一个没有成对出现的标签)

在浏览器中打开 (图中第一行处应添加一个world)

这里我们看到使用块引用，无论是什么格式，直接添加都会放在一行，打乱原有格式。

3.css和span和div的理解

从此之后的内容都在body身体里

文本标签的常用样式(属性)

1.TEXT.ALIGN:LEFT,左对齐

2.TEXT.ALIGN:CENTER,居中

3.TEXT.ALIGN:RIGHT,右对齐

4.width:像素值或百分比，对象宽度

5.height：像素值或百分比，对象高度

6.color颜色

7.font-size：设置字体大小

8.border：设置边框

9.padding.top：文本距边框上部的距离

10.padding.left:文本距边框左部的距离

这里我们注意到border-radius比高度和宽度大很多时，边框就会变成圆形

如果没有没有border-radius，那么边框就是正方形

如果较小就是类正方形

4.表格标签

1.table代表一个表格

caption：中间写入标题

td：写入每一列的内容

tr：写入每一行的内容

cellpadding=‘3’ —设置表格的内边距

cellspacing=‘5’ —设置表格的外边距

行输入法

输入表格式的行输入法

5.合并列单元格

6.合并行单元格

7.表单标签

这里下拉标签任选其一

8.个人信息

高度和宽度也可以用百分比表示

显示结果

9.图片标签

src指定图片的位置， 可以是url地址， 也可以是本地的图片;

alt: 如果图片不能正常加载， 则显示alt里面的文字;

建议将图片从网站上下载到桌面，存放在pycharm中当前目录里

添加图片超链接

10.超链接标签

在浏览器中执行

这里有5个超链接，分别是百度，4399，本地跳转

11.序列化标签

1.无序标签之ul和li

去掉ul里面的所有li标签里面的样式

实现水平导航栏和竖直导航栏

list-style-type：none -----去掉原点

display：inline-block ------变为行内元素，并且可以设置高度和宽度

width： -------可以使用300px表示，也可以用百分比表示

此处的HTML是一个超链接

链接如下

2.有序标签之ol和li and 嵌套标签

12.编写CSS样式——类选择器

不难看出，进入css样式后，修改在head里进行

13.编写CSS样式----标签选择器

14.编写CSS样式----id选择器

15.CSS联系-----导航栏

这里hover的作用是，鼠标碰到就变色；html依旧是超链接

16.CSS的引入方式

*引入方式：

1.行内引入：

鼠标接触依旧变色

17.层级选择器

这里修饰的是ul标签内的li标签内的a标签。

注意：margin：0 auto意思是整体居中。