web前端简易制作HTML静态网页
作者:80建站模板发布时间:2021-02-21浏览量:32
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等

web前端简易制作HTML静态网页

1.文章标题

在这里插入图片描述这里可以看出在 <head 里的title 中 添加了 hello world
那么生成的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-----
以上标签都是成对出现的
比如:<b … /b>
换行标签: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中当前目录里
在这里插入图片描述
添加图片超链接
<a href=’‘http://链接地址‘’><img src=’‘img01.jpg’’>
在这里插入图片描述

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.行内引入:<a style="行内引入的样式‘’>
2.内部引入:写在head标签里面的style标签里面的样式;
3.外部引入:将css样式独立成一个文件,通过<link rel=’'stylesheet ‘’ href= ‘‘css/main.css’’>与当前html文件链接在一起。
三种引入方式的优先级:就近原则
注意:成立前提是有css目录里的main文件
其内容为:div{ width:80%; margin:0 auto; padding:0;}
ul{ list-style-type:none}
li{ display:inline-block; width:%20; background:snow;
color:#333333; padding-top:10px; padding-bottom:10px;
text-align:center;
font-size:large;
text-transform:capitalize;
li:hover{ background:green; color:snow;}
a:hover{ color:snow;}

最终显示如下:
在这里插入图片描述

在这里插入图片描述

鼠标接触依旧变色

在这里插入图片描述

17.层级选择器
在这里插入图片描述
这里修饰的是ul标签内的li标签内的a标签。
注意:margin:0 auto意思是整体居中。

文章标签:网站模板    HTML    web前端    源码   
关 键  词:制作HTML静态网页,网站模板制作,网页代码源码下载
本文网址:http://www.80oo.cn/jishu/59.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
2021
05-13
如今建站是件很简单的事情,任何人都可以在不了解Web开发,设计或编码的情况下建立和设计网站。无论您是想为自己还是为企业创建网站,都可以使用正确的工具和资源轻松地做到这一点。本分步指南将帮助您从头开始创建网站,而无需花钱给自由职业者,代理商或网站建设者。您只需要1-2小时的空闲时间即可完成指南并建立网站。建
2021
05-11
一个网站的框架是跟搜索引擎蜘蛛抓取收录有关的。网站设计工作的内容 网站主页设计而大部分客户登录网站先浏览的便是主页。在网站设计时,首页布局不光仅仅是思考到美观方面,关键的问题是符合网站的营销策略,所以设计网站主页的工作量占据多半以上的时间。设计网站主页的工作量占据多半以上在设计网站之
服务热线