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意思是整体居中。
