html 基本语法
html标签
-
单标签
<img /><img>通常用简写 -
双标签
<html> </html>
属性 属于标签 在标签内部
<img src="图片的地址">
<table width="100" height="200"></table>
ps:单双引号都可以，不写也可以，最好用双引号写
语法规范
-
标签嵌套 用缩进 （看公司具体规范）
-
标签名不区分大小写 建议小写
-
属性名也不区分大小写 建议小写
注释
<!--单行-->
<!--
多行
-->
常用HTML实体
-
一个空格 -
<< 小于号 -
>> 大于号 -
&& 和号 -
©版权号 -
¥人民币符号
2 html 常用标签
主体结构
-
<html></html> -
<head></head> -
<body></body>
HEAD 标签
-
<title></title>网页标题 -
<meta>指定网页的元信息 字符集、关键字、描述 seo搜索 属性：charset name content -
<style></style>最长用来写css代码 -
<link>属性：herf type rel 作用：导入css或者指定网页图标 -
<script></script>导入JavaScript
格式排版标签
-
<hn></hn>1-6 大标题 seo权重有关 比p标签大的多 -
<p></p>段落 seo权重有关 -
<pre></pre>原样输出 用于写代码 -
<br>换行 -
<hr>分隔 -
<div></div>布局用的 本身无意义
文本标签
-
<em></em>强调 表现为斜体 -
<strong></stron>强调 表现为粗体 -
<mark></mark>H5新增 表示被选择 -
<sup></sup>上标 -
<sub></sub>下标 -
<ins></ins>添加的内容 -
<del></del>删除的内容 -
<ruby></ruby><rt></rt>加拼音 H5新增 配合使用
4 CSS基本语法
使用css
-
link 引入外部的css文件
-
<style></style>在html中写 -
使用html元素的style属性 尽量不要使用这种
格式
选择器 {
CSS属性：值;
CSS属性：值;
}
选择器 {CSS属性：值;CSS属性：值}
注释
/**/
css长度单位
px 像素
em 默认大小的倍数
百分比 默认大小参照
css颜色单位
colorname: red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb（34,45，23） rgb（20%，57%，100%）
16进制 #abcdef #f90 #ccc 推荐使用的
5css选择器
1 标签名选择器
tagname {
}
2 类名
.classname {
}
3 id选择器
idname {
}
4 全局选择器
* {
}
5 组合 后代元素
选择器 选择器
6 组合 子元素
选择器>选择器
7 群组
选择器，选择器,...
8 多条件选择器
p.item
6 选择器优先级
id > class > tagname > *
组合选择器 数数
7 css 常用属性
字体
-
font-family 非衬线字体 ：微软雅黑 sans-serify 衬线字体：宋体 serify
-
font-size: 30px; 字体大小
-
font-weight normal/blod 加粗
-
font-style notmal/italic 倾斜
-
font-variant normal/small-caps 对英文小写才有效 小型大写
-
font 复合属性
font:[weight|style|variant] size family
颜色
-
color
文本
-
word-spacing: 30px; 字符间隔 针对英文
-
letter-spacing: 10px; 字符间隔 针对汉字
-
text-align: left/center/right; 字体水平对齐方式：默认左对齐
-
vertical-align: baseline/middle; 顶线、基线、底线 字体都是在顶线和底线之间蹦跶 只有把文字和图片一起写的时候有点用
-
line-height 行高
-
text-decoration: none/overline/underline/line-through 默认none 最常用来处理超链接的下划线
-
text-indent:2em 首行缩进
-
word-wrap:break-word; 对于长链接或长单词自动断行
-
overflow-wrap:break-word 和上面的一样 css3起的别名
-
white-space: pre/pre-wrap; 格式化输出 /保证换行并缩进
-