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意思是整体居中。
web前端简易制作之HTML相关推荐
- 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)电影网页介绍8页 带报告3900字
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生 ...
- 用DIV+CSS技术设计的个人电影网站(web前端网页制作课作业)
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 基于HTML+CSS+JS制作商城(web前端网页制作课作业)--7古典乐器网 8页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 |在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 ...
- 用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...
- web前端网页制作课作业——用DIV+CSS技术设计的家乡旅游主题网站
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 用DIV+CSS技术设计我的家乡网站(web前端网页制作课作业)南宁绿城之都
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 大二Web课程设计——家乡主题网页设计(web前端网页制作课作业) 四川旅游网页设计制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 大二web期末大作业——家乡主题网页设计(web前端网页制作课作业) 四川旅游网页设计制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 大四web前端网页制作课作业——HTML+CSS+JavaScript仿小米手机商城网站(37页)
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- web前端网页制作课作业:用DIV+CSS技术设计的静态网站【四大名著】中国传统文化主题题材设计
最新文章
- python个人网站开发_python 全栈开发,Day81(博客系统个人主页,文章详情页)
- why is pc important for university students?
- python控制ppt定时_python中使用requests实现自动回帖.ppt
- 价量分析.成交量判断多空头.用跌减涨增量法买股票.成交量识庄家
- 用友集团前端面经整理及答案
- Win7 环境下 IE8 升级到 IE11 后 F12 工具无法使用
- oracle12c不使用cdb模式,Oracle 12c 使用Non-CDB来创建PDB
- vue el-table 表格宽度无法缩小自适应
- 【国内chatgpt使用方法合集】(5月22日已更新)
- 字体的故事之:衬线体的前世今生
- Halide::Generator生成器使用说明
- 计算机组装安装系统流程图,如何安装操作系统
- vue按照字母表排序
- 剑灵系统推荐加点_《剑灵》各职业练级推荐修炼加点攻略
- sdwan不可替代cn2
- 深入理解Java内存模型——volatile
- 【IntelliJ IDEA教程】提示信息Unmapped Spring configuration files found.Please configure Spring facet. 解决办法
- Markdown语法简介,markdown导出PDF
- hpe 3par命令行查看状况脚本
- 360天擎卸载密码_Windows安装和完全卸载MySQL8.0(超详细教程)