1 HTML 基本语法
html标签
-
单标签
<img />、<img> -
双标签
<html> </html>
属性 属于标签
<img src="图片的地址">
<table width="100" height="200"></table>
语法规范
-
标签嵌套 用缩进
-
标签名 不区分大小写 建议小写
-
属性名 不区分大小写 建议小写
注释
<!-- 多行 -->
<!--
多行
-->
常用HTML实体
-
空格 -
<< -
>> -
&；& -
©；版权 -
¥；人民币
<!doctype html> <html> <head> <!--注释--> <meta charset="utf-8"> <!--指定字符编码--> <title>同志交友</title> <!--指定网页的标题，对用户是不可见--> <meta name="keywords" content="同志交友,交友平台,同志,同志相亲"> <!--可提供网页的元信息，比如搜索引擎或更新频度的描述和关键词，<meta标签永远位于head元素内部--> <meta name="description" content="全国最大的同志交友平台"> <!--该信息也不会再前端页面进行展示，content定义与http-equiv或name， 属性相关的元信息，name 把content属性关联到一个名称--> <link rel="stylesheet" type="text/css" href="./01.css"> <!--链接外部css文件，链接收藏夹图标,rel:relations的缩写，是指的关联到的文件是什么 rel定义当前文档与被链接文档之间的关系--> <link rel="shortcut icon" type="image/x-icon" href="./friends.ico"> <!--shortcut icon特指浏览器地址栏左侧显示的图标，一般大小为16 x 16, 后缀名为.icon,icon指的是图标，规定被链接文档的 MIME 类,这里是值为image/x-icon,格式可为png,gif,jpeg,尺寸一般为16x16, 24x24, 36x36等--> <style type="text/css"> h1 { /*--设定主标题字体的颜色*/ color: red; } </style> </head> <body> <!-- 注释： 标题 --> <!-- 是大是大非 手动阀十分大师傅地方 撒旦发顺丰的 撒旦发顺丰大 --> <h1>交友平台</h1> <hr> <!--设置分割线--> <p> <!--每个字段都有边框，是因为连接了外部的css文件，而css文件中对字段设置了边框--> 我今天学习了一个标签 <h1> </h1> <!--<代表左尖括号，>代表右尖括号， 代表空格--> </p> <p>我 她</p> <p> ©上海备案号：1231312398888 </p> <!--&cop代表：@--> <p>我捡了 ¥10000</p> <!--¥代表：¥--> <p>标识空格的实体： &nbsp;</p> <!--&代表：&--> </body> </html>
2 HTML常用标签
主体结构
-
<html></html> -
<head></head> -
<body></body>
HEAD标签
-
<title></title>网站标题 -
<meta>指定网页的元信息 指定关键字 指定描述 指定字符集 属性： charset、name、content -
<style></style> -
<link>导入css或者指定网页图标 属性 src、 type 、 rel -
<script></script>导入javascript
格式排版标签
-
<hn></hn>1~6 标题 -
<p></p>段落 -
<pre></pre>原样输出 -
<br>换行 -
<hr>分隔 -
<div></div>
文本标签
-
<em></em>强调 表现为斜体 -
<strong></strong>强调 表现为粗体 -
<mark></mark>H5新增 表示被选择 -
<sup></sup>上标 -
<sub></sub>下标 -
<ins></ins>添加的内容 -
<del></del>删除的内容 -
<ruby></ruby>/<rt></rt>加拼音 H5新增
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本标签</title> </head> <body> <h1>同志交友</h1> <hr> <!--分割线--> <div> <h2>我的祖国</h2> <p> 我生在一个美丽的<em>小山坡</em> <br> <!--表示强调，通常为斜体字，表现形式是小山坡变为斜体字--> <div> 那里非常 <strong>美丽</strong> <!--表示强调(语气更强)，通常为粗体字，表现形式为美丽被加粗--> <div> 我撒旦发顺丰大十分大师傅的的撒发射点发撒旦发啊手动阀 </p> <p> 手动阀<mark>手动阀手</mark>动阀 <!--H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面，表现为手动阀手被黄色选中你--> <div> </p> <p> ¥<ins>100</ins> <del>98000</del><!--ins标签定义已经被插入文档中的文本,显示的形式是100加下划线，del 标签定义文档中已删除的文本,显示的形式是98000被横线穿过，--> <div> </p> <p> H<sub>2</sub>O <!-- 文字下标字体标签，显示在H的下标，H2O--> <div> </p> <p>100<sup>2</sup></p> <!--文字上标字体标签，1002--> <div> <p> <ruby> <!--H5新增 标签定义 ruby 注释（中文注音或字符） 在东亚使用，显示的是东亚字符的发音。--> <div> 同志 <rt>tongzhi</rt> <!--H5新增 标签定义字符（中文注音或字符）的解释或发音--> <div> </ruby> </p> </div> </body> </html>
3 CSS基本语法
使用CSS
-
link 引入外部的CSS文件
-
<style></style>在html中写 -
使用html元素的style属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <link rel="stylesheet" type="text/css" href="./01.css"> <style type="text/css"> /*css注释*/ h1 { color: green; font-size: 60px; } </style> </head> <body> <h1>HTML中使用CSS</h1> <hr> <p style=" 300px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <link rel="stylesheet" type="text/css" href="./01.css"> <!--链接外部css文件，链接收藏夹图标,rel:relations的缩写，是指的关联到的文件是什么 rel定义当前文档与被链接文档之间的关系--> <style type="text/css"> /*css注释*/ h1 { color: green; /*设置标题的颜色为绿色*/ font-size: 60px; /*设置字体的大小*/ } </style> </head> <body> <h1>HTML中使用CSS</h1> <hr> <!--分割线--> <p style=" 300px"> <!--设置矩形框边框的宽度--> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> <!--没有设置矩形框的宽度，默认是以接近屏幕的宽度作为矩形框的宽度--> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
格式
选择器 {
CSS属性: 值;
CSS属性: 值;
}
选择器 {属性:值;属性:值}
注释
/* */
CSS长度单位
px 像素
em 默认大小的倍数
百分比 默认大小参照
cm
mm
pt
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <style type="text/css"> /*--指定div对其中的内容进行修饰*/ div { border:10px solid orange; /*border这是边框的粗细，solid设置边框的颜色*/ width: 100cm; width: 100mm; width: 1600px; height: 300px; /*设置矩形框的高度*/ padding: 20px; /*距离边框的内边距*/ /*padding:10px 5px 15px 20px; 分别是距离内边框上、右、下、左的距离*/ font-size: 20px; font-size: 1.5em; /*设置字体为默认字体大小的1.5倍*/ font-size: 200%; /*设置字体为默认字体大小的2倍*/ width: 50%; /*后面的属性会覆盖前面相同的属性*/ } </style> </head> <body> <h1>CSS长度单位</h1> <hr> <!--分割线--> <div> 撒旦发顺丰的骄傲浪费空间 撒旦发射点法发 撒旦发射点发 啊撒旦发顺丰大发 </div> </body> </html>
CSS 颜色单位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
16进制 #abcdef #f90 #ccc
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <style type="text/css"> div { width: 400px; height: 400px; /*设置矩形框的宽和高相等*/ border: 2px dotted red; /*设置矩形框的边框粗细，以及将边框设置为虚红线 */ background-color: purple; /*设置矩形框的背景颜色为紫色 */ /* R 红 G 绿 B 蓝 */ background-color: rgb(100, 200, 50);/* */ background-color: rgb(100%, 50%, 10%);/* */ /* 十六进制 */ background-color: #ab1234;/*调出的颜色偏紫红色 */ background-color: #abcdef;/*调出的颜色为浅蓝色 */ background-color: #336699;/*和369调出的效果一样 */ background-color: #369;/*调出来的为蓝色 */ background-color: #f90; /*f最大颜色偏向于红色，调出的是橙色 */ background-color: #fff;/*三个字母相同且最大为白色 */ background-color: #000;/*三个数字相同且最小为黑色 */ background-color:#c1c1c1;/*三种颜色用相同的配色调出一般为灰色 */ } </style> </head> <body> <h1>css颜色单位</h1> <hr> <div> </div> </body> </html>
4 CSS选择器
#标签名选择器
tagName {
}
# 类名
.className {
}
#ID选择器
#idName {
}
# 全局选择器
* {
}
# 组合 后代元素
选择器 选择器
# 组合 子元素
选择器>选择器
# 群组
选择器,选择器，选择器
# 多条件
p.item
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <style type="text/css"> /*ID选择器*/ #myFriend { /*id的优先级最高*/ color: #f90; } /*CLASS选择器*/ .first-item { width: 900px; } .item { width: 700px; padding: 20px; border: 1px solid #369; } * { /*border:2px solid red;*/ } /*list下的所有li*/ .list li { /*border: 1px solid orange;*/ } /**/ .list>li { border: 1px solid orange; } /*群组选择器 或者 or*/ h1,hr,p,.item { } /* and */ p.item { } .item.first-item{ } </style> </head> <body> <h1 id="yourFrind">CSS选择器</h1> <hr> <ul> <li>啊手动阀</li> <li>啊手动阀</li> <li>啊手动阀</li> </ul> <hr> <ul class="list"> <!--一般遇到列表类型布局我们就使用<ul><li>列表标签布局。--> <li>了撒旦发射点法发</li> <li>了撒旦发射点法发</li> <li>了撒旦发射点法发 <ul> <li>撒发射点法按时打发</li> <li>撒发射点法按时打发</li> <li>撒发射点法按时打发</li> <li>撒发射点法按时打发</li> </ul> </li> <li>了撒旦发射点法发</li> <li>了撒旦发射点法发</li> <li>了撒旦发射点法发</li> <li>了撒旦发射点法发</li> </ul> <p class="item">撒旦萨芬记录卡是否健康拉法基</p> <p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p> <p>撒旦萨芬记录卡是否健康拉法基</p> <p id="myFriend">撒旦萨芬记录卡是否健康拉法基</p> <p>撒旦萨芬记录卡是否健康拉法基</p> <p class="item">撒旦萨芬记录卡是否健康拉法基</p> <p>撒旦萨芬记录卡是否健康拉法基</p> <hr> <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </body> </html>
5 选择器优先级
ID > CLASS > tagName > *
组合选择器 数数
<!DOCTYPE html> <html> <head> <title>同志交友</title> <style type="text/css"> #myItem { color: red; } div { color: green; } div.item { color: yellow; } ul>li>ul>li>ol>li .item { } </style> </head> <body> <h1>选择器优先级</h1> <hr> <div class="item" id="myItem"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body> </html>
6 CSS属性 常用
字体
-
font-family
-
font-size
-
font-weight normal/bold
-
font-style normal/italic
-
font-variant normal/small-caps
-
font 复合属性
font:[weith | style | variant] size family
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <style type="text/css"> p { font-family: 'Microsoft YaHei','宋体','楷体',sans-serif; /*如果本机前几种字体没有，会以最后一种默认的字体*/ /* 字体家族 非衬线字体： 微软雅黑 黑体 思源黑体 sans-serify 衬线字体： 宋体 楷体 仿宋 serify /*就是一些有不规则的字体，即字体的每个部分不是粗细一致的*/ */ font-size:30px; font-weight: bold; /*设置字体的粗细*/ font-variant: small-caps;/*定义元素的文本是否为小型的大写字母*/ font-style: italic; /*指定元素的字体是否为斜体-italic是指定为斜体*/ font: 12px '微软雅黑',sans-serify;/*指定字体的类型*/ font: bold 12px '微软雅黑',sans-serify;/*指定字体的大小和非衬线*/ font: bold italic 12px '微软雅黑',sans-serify;/*复合属性，指定字体粗体 斜体 字体大小 字体类型以非衬线*/ } </style> </head> <body> <h1>常用属性-字体属性</h1> <hr> <p> 有个人特别喜欢我，偷偷地看我 hello </p> </body> </html>
颜色
-
color
文本
-
word-spacing
-
letter-spacing
-
text-align: left / center /right
-
vertical-align: baseline / middle ....
-
line-height 行高
-
text-decoration ： none/overline/underline/line-through
-
text-indent: 2em
-
word-wrap: break-word
-
overflow-wrap word-wrap的别名 CSS3
-
white-space pre pre-wrap
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>同志交友</title> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"> .text { width: 600px; height: 200px; border: 1px solid #ccc;/*设置文本边框*/ color: #369; /*letter-spacing: 10px;*/ /*word-spacing: 30px;*/ /*定义文本修饰的种类*/ text-decoration: underline;/*定义修饰的文本内容有下划线*/ text-decoration: overline;/*定义修饰的文本内容有上划线*/ text-decoration: line-through;/*定义修饰的文本内容被一条线穿过*/ /*text-align: left; text-align: right; text-align: center;*/ vertical-align: middle;/*定义行内元素在行框内的垂直对其方式，垂直居中*/ /*text-indent: 30px;*/ line-height: 200px;/*设置行高*/ } a { text-decoration: none;/**/ } img { width:100px; vertical-align: middle;/*垂直方向居中对其*/ } .content { width: 400px; padding: 20px;/**/ border: 1px solid #ccc;/**/ word-wrap: break-word;/*内容超过边界是会在边界内换行*/ } .box { width: 600px; padding: 20px; border: 1px solid #ccc; white-space: pre; /*原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果*/ /*white-space: nowrap;*/ /*与normal值一致，不同的是会强制所有文本在同一行内显示。*/ /*white-space: nowrap;*/ white-space: pre-wrap; /*与pre值一致，不同的是文字超出边界时将自动换行。*/ white-space: pre-line; /*与normal值一致，但是会保留文本输入时的换行。*/ } </style> </head> <body> <h1>CSS文本属性</h1> <hr> <p class="text"><!----> 我很帅 i am very shuai </p> <hr> <a href="http://www.baidu.com">百度</a><!----> <div > <img src="./juhua.jpg" style="100"><!----> 你的菊花很美丽 </div> <hr> <p class="content"><!----> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sdfasdfajsdkfjaskdfjaksldfjaklsfjaskldfjskladfjsklafjdklasfjklasjdfkalsjdfklasjdfklasdfjklasdfjklasdfjklasdfjklasfjdklasfjsklafdj http://unclealan.cn/docs/python/frontend/chapter1/html3css3ji-chu.html </p> <hr> <div class="box"><!----> if a > 100: print('NB') msg = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod " </div> </body> </html>
补充 markdown
markdown
一种格式，包含 标题、列表、代码块、图片、超链接、表格...