HTML
Html和CSS的关系：
- HTML是网页内容的载体（骨骼），CSS样式是表现（肌肉皮肤）
- JavaScript是用来实现网页上的特效效果（动作行为）
基本结构和常见标签：
<!doctype html> --- 文档声明，表示是html5
<html> --- html标签包裹网页的主体，根标签
<head> --- html的头部，可包含title、script、style、link、meta等标签
<title>标题<title> --- 网页的标题
</head>
<body> --- 文档的主体
<!-- 注释，不会显示到网页中，会被忽略 -->
<p>段落标签</p>
<h1>一级标题，最大最重要</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题，最小最不重要</h6>
<strong>强调作用，粗体</strong>
<em>强调作用，斜体</em>
<span>无任何语义的标签</span>
<q>引用标签，引用别人的一句话</q>
<blockquote>引用别人的一整段话，长引用</blockquote>
<br> --- 换行
--- 会被解析为空格符号
<hr> --- 水平分割线
<address>常用来描述地址</adress>
<code>用来描述代码</code>
<pre>用来包裹code标签，让里面的代码格式按照编辑时的位置排列</pre>
<ul> --- 无序列表
<li>列表中的项</li>
<li>列表中的项</li>
</ul>
<ol> --- 有序列表
<li>列表中的项</li>
<li>列表中的项</li>
</ol>
<div>无语言的块状盒子</div>
<table> --- 表格
<caption>表格的描述性文字，标题</caption>
<tr> --- 表格中的一行
<th>表格中的表头，黑体</th>
<th>表格中的表头</th>
</tr>
<tr> --- 表格中的一行
<td>表格中的单元格</td>
<td>表格中的单元格</td>
</tr>
<table>
<a target="_blank">链接，blank属性表示在新窗口打开</a>
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">发送邮件</a>
<img src="" title=""> --- 图片标签
<form method="post" action="save.php"> --- 表单标签
<input type="text" name="myName"> --- text文本输入框
<input type="password" name="pass"> --- 输入框，带星号
<textarea rows="行数" cols="列数">多行输入</textarea>
<input type="radio" value="值" name="名称" checked="checked"/> --- 单选按钮
<input type="checkbox" value="值" name="名称" checked="checked"/> --- 多行按钮
<select multiple="multiple"> --- 下拉列表
<option value="值">选择项的值</option>
</select>
<input type="submit" value="提交"> --- 提交按钮
<input type="reset" value="重置"> --- 重置按钮
<label for="控件id名称">描述input的文字</label>
</form>
</body>
</html>
CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
语法和常见用法：
/* 注释代码 */
<style>
p { --- p表示选择器，即选择p标签
font-size:12px; --- 属性和属性值，字号大小
color:red; --- 颜色
font-family:"宋体"; --- 字体
font-weight:bold; --- 粗细
font-style:italic; --- 字体样式
text-decoration:underline; --- 下划线
text-decoration:line-through; --- 删除线
text-indent:2em; --- 缩进
line-height:2em; --- 行间距
letter-spacing:50px; --- 中文字间隔、字母间隔
word-spacing:50px; --- 单词间隔
text-align:center; --- 对齐方式
}
</style>
<p style="color:red">这里文字是红色。</p> --- 内联样式表
<link href="base.css" rel="stylesheet" type="text/css" /> --- 外部样式表
选择器：
- 标签选择器：
p、div、h1、h6 - 类选择器：
<div class="cls"></div> -> .cls{} - ID选择器：
<div id="no1"></div> -> #no1{} - 子代选择器：
ul>li {}，选择 ul 中的 li 标签 - 后代选择器：
div div {}，选择 div 中的 div，但是不一定是父子关系 - 通用选择器：
* {}，选择所以标签元素 - 伪类选择器：
a:hover {}，用冒号表示 - 分组选择器：
h1,div {}，用逗号表示
具有继承性、层叠性，有权重的问题：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
元素
元素分类：
- 块级元素：
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行；
- 元素的高度、宽度、行高以及顶和底边距都可设置；
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素
- 内联元素:
- 和其他元素都在一行上
- 元素的高度、宽度及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
<span>、<a>、<label>、<strong>和<em>就是典型的内联元素
- 内联块状元素:
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置
<img>、<input>标签就是这种内联块状标签
盒模型：每个元素可以看成是一个盒子，这个盒子从里到外，分别对应着不同的内容，内容content -> 内边距（内容到边框的距离） -> 边框 -> 外边距（距离相邻盒子边界的距离）
div{border:2px solid red;} --- 边框
div{border-bottom:1px solid red;} --- 边框
div{padding:20px 10px 15px 30px;} --- 内边距
div{margin:20px 10px 15px 30px;} --- 外边距
/* 书写顺序：上 右 下 左，顺时针 */
/*
简写：
margin:10px 10px 10px 10px;
-》 margin:10px;
margin:10px 20px 10px 20px;
-》 margin:10px 20px;
margin:10px 20px 30px 20px;
-》 margin:10px 20px 30px;
*/
布局
布局模型：
- 流动模型：从上到下依次放盒子
- 浮动模型：浮动盒子会影响他下面盒子的摆放，关键词
float - 层模型：
- 绝对定位，相对于有定位的父盒子的位置
position:absolute; - 相对定位，相对自己的位置定位
position:relative; - 固定定位：相对浏览器的位置定位
position:fixed;
- 绝对定位，相对于有定位的父盒子的位置
居中：
.txtCenter{
text-align:center;
}
margin-left:auto;
margin-right:auto;
position:relative;
left:-50%;
height:100px;
line-height:100px;
点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦