HTML-CSS基础学习笔记

2017-07-20 本文已影响0人 Cocoaleeo

HTML

1. HTML文件结构

<html>
    <head>...</head>
    <body>...</body>
</html>

<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。

<head>
    <title>...</title> // 显示网页的标题信息
    <meta> 
    <link>
    <style>...</style>
    <script>...</script>
</head>

在<body>和</body>标签之间的内容是网页的主要内容，如 h1, p, a, img 等网页内容标签。

2. 标签

p标签：段落标签，显示段落文字，常用于文章正文中
h标签：h1-h6代表不同大小文字的标题
strong: 加粗文本， em: 斜体文本
span：设置单独样式的文本, 例如设置蓝色字体

<style>
span{
    color:blue;
}
</style>

q标签：引用文字，显示为添加引号
blockquote标签：长文本引用标签，单独形成一段
br：换行标签
hr：分割线
&nbsp: 文本中添加空格
address：地址标签，用于地址，邮件等
code标签：代码标签，用于显示代码
pre：显示多行代码
ul-li：无序列表
ol-li：有序列表
div：容器
talbe：表格标签

<table>
  <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

caption：为表格添加标题
a：链接标签，在新页面中打开链接添加 target="_blank", 如果是链接到邮箱，在href内容中添加 mailto，添加subject邮件主题，body邮件内容

<a href = "https://www.jianshu.com" target = "_blank">简书</a>
<a href="mailto:18840839565@163.com ?subject=观了不起的盖茨比 &body=你好，对此评论有些看法">对此影评有何感想，发送邮件给我</a>

img：图片标签,src 可以是本地文件也可以是网址

![](https://img.haomeiwen.com/i2992566/889e7e083b9825b8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

form：表单 / 下拉列表框

/// 传送方式为post/get， action：浏览者输入的数据被传送到的地方,比如一个PHP页面
<form method="传送方式"   action="服务器文件">

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间

input：由type决定形式

        <form action="post" method="save.php">
            <!--
            type: text 可以输入文本内容 / password 输入密文 / submit 提交按钮 / reset 重置按钮 / radio 单选框
            checkBox：复选框 value：提交数据到服务器的值（后台程序PHP使用） name：为控件命名，以备后台程序 ASP、PHP 使用 
            checked：当设置 checked="checked" 时，该选项被默认选中
            -->
            账户：
            <input type="text" name="usrname" id="usrname" value="" />
            <br>
            密码：
            <input type="password" name="pas" id="pas" value=""/>
            <input type="submit" value="submit"/>
            <input type="reset" name="reset" id="reset" value="reset" />
            <input type="radio" name="单选框" id="" value="" />
            <input type="checkbox" name="复选框" id="" value="" />
        </form>

表单中添加标签：

<label for="male">男</label>

textarea：多行文本输入
selected-option: 选择框，默认为单选，添加mutible是为复选框

<select>
        <option value="shanxi">山西</option>
        <option value="liaoning">辽宁</option>
        <option value="shanghai">上海</option>
    </select>
//  复选框用这个：<select multiple="multiple">

CSS

1.基本样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

基本样式，包括字体、颜色、边界等内容

font-size:12px;    /*设置文字字号*/
color:red;    /*设置文字颜色*/
font-weight:bold;    /*设置字体加粗*/
border:1px solid red     /*边框 1px，实现，红色*/

选择器：标签选择器、类选择器、ID选择器、子选择器、包含（后代）选择器、通用选择器、伪类选择符、分组选择符。
标签选择器，权值为1

/* 标签名+{} */
p{}

类选择器，权值为10

/* . + 自定义类名 + {}*/
.customStyle { color: purple; }

ID选择器，权值最高为100

/* # + id + {} */
#testSytle {color: orange;}

子选择器，定义当前类下的第一个对应的子元素

/* . + class + > + 子元素 */ 
.customStyle>div{ background-color: purple; } /* customStyle 类下的第一个div的背景色为紫色 */

包含（后代）选择器，定义当前类下所有对应子元素的样式

/* . + class + space + 子元素 */
.customSpan span{ color: white; } /* 定义当前类下所有的span 颜色为白色 */

通用选择器

/* * + {} */
   * { color: red } /* 匹配所有元素 设置颜色为红色, 权值最低 */

伪类选择符

a:hover{ color: pink; } /* 常用的就这一种，当鼠标滑过是显示字体颜色为pink */

分组选择符

/* 多种选择器之间用逗号隔开 */
.customSpan,span,#lol{color: white;} /* 类选择器 + 标签选择器 + ID选择器*/

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，分组选择器权值为个选择器权值之和，权值越高，优先级别越高，当两者权值相同时，取后者。对应的：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
当希望增加某个标签的重要性是，使用 “ !important ”

p{color:red!important;}

2.格式化排版

字体

font-family: "微软雅黑";

字号，颜色

font-size:12px;color:#666；

粗体

font-weight:bold;

斜体

font-style:italic;

下划线

text-decoration:underline;

删除线

text-decoration:line-through;

缩进

text-indent:2em; /* 缩进2个字符 */

行间距

line-height:1.5em; /* 1.5倍行间距 */

字间距

letter-spacing:50px;
word-spacing:50px

对齐

text-align:center;
text-align:left;
text-align:right;

3.盒模型

块级元素

diaplay:block;

内联元素

display:inline;

内联块元素

display:inline-block;

边界

/* 设置各个方向 */
border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;
/* 统一设置 */
border:1px solid red;

宽度和高度，一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

margin:10px;  /* border向外 */
border-bottom:1px dotted #ccc; /* border */
padding:10px; /* border向内 */
width:200; /* 内容宽度 */
/* 填充, 上右下左顺时针顺序 */
padding:20px 10px 15px 30px; 
/* 边界，上右下左顺序 */
margin:20px 10px 15px 30px;

4.部局模型

流动模型
网页元素默认为Flow布局：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，内联元素会在所处的包含元素内从左到右水平分布显示。
浮动模型
任何元素默认是不能浮动的，但可以添加下面代码来进行设置

float:left;
float:right;

层模型
层模型有三种形式：
1、绝对定位(position: absolute)：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口；
2、相对定位(position: relative)：相对于自身原来的位置进行移动；
3、固定定位(position: fixed)：固定位置，不会随着页面滚动位置进行变化；
定宽元素居中

width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

不定宽元素居中

margin:0 auto;
/* 利用相对位置进行偏移 */
position:relative;
left:50%;
/* 设置为内联元素 */
display:inline;

HTML-CSS基础学习笔记

HTML

1. HTML文件结构

2. 标签

CSS

1.基本样式

2.格式化排版

3.盒模型

4.部局模型

猜你喜欢

热点阅读