o(￣▽￣)ブ

HTML

基本标签

title:定义网页标题标记
html:开始标记
body:内容标记
font:字体标签
- face:定义字体
- size:定义文字大小
- color:定义字体颜色
center:居中文本
br:换行
p:标记段落
img:图片标记
- src属性下写图片目录,如果图片与html文件在同一目录下,可以简写成./pic.jpg, ./代表当前目录,如果图片与html文件不在同一目录下,那么../代表返回html的上一级文件,多一个.就多返回一级.
b:粗体标记
i:斜体标记
hr:在页面中创建一条水平线
- size:设置水平线的宽度
- lenth:设置水平线的长度
- color:设置水平线的颜色
h1-h6:设置标题大小
a:定义一个超链接,点击转到
- href:定义超链接的目标连接
- target:定义超链接打开的方式.
align:定义对齐方式

表格标签
table:定义一个表格
- boder:定义表格的边框
- cellpadding:定义表格列与列的距离
- cellspacing:定义表格行与行的距离
tr:定义一行
td:定义一列

<table border="1" cellspacing="0" cellpadding="0">
    <caption>标题</caption>
    <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Score</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Joe</td>
        <td>90</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lily</td>
        <td>80</td>
    </tr>
</table>

表单标签

表单中所有的input输入,如果想被提交,必须指定它的name属性.

form:创建表单标签
- action:表单数据上传的服务器URL,
- method:设置浏览器像服务器发送数据的方式,有post和get两种方式,post方式将数据封装再发送,请求的参数大小没有限制,get直接将数据显示在浏览器地址栏中,请求的参数大小有限制.
input:输入标签,可以根据input的type不同的值来收集多种形式的数据.
- type:规定输入的不同属性.它可以是:
  - text:文本输入框,默认宽度为 20 个字符.
    - placeholder:指定输入框的提示信息,当点击时,输入框的内容会被清空.
  - password:密码输入框,该文本框输入的字符会被掩码.
  - radio:单选框
  - checkbox:多选框
  - file:文件框
  - hidden:隐藏输入框
  - button:按钮
  - submit:提交表单
  - image:图片按钮,点击可提交表单
  - color:取色器
  - date:日期,精确到年月日
  - datetime-local:日期,精确到年月日时分
  - email:输入邮箱并自动校验,输入的内容必须包括@符号
label:指定输入项的文字描述信息
- for:该属性值若与input’中的id属性值对应,那么label的描述会与input输入框关联起来,点击文字描述,就等于点击了文本输入框.
select:下拉选择框
- option:下拉栏的选项.
textarea:文本输入框
- cols:设置输入框的列数(每行多少个字符)
- rows:设置输入框的行数(默认输入框大小是多少行)

CSS

CSS的使用：CSS与html结合方式

内联样式:在标签内使用style属性指定css代码
1
<div style="color:red;">hello css</div>
内部样式:在head标签内，定义style标签，style标签的标签体内容就是css代码

<style>
	div{
		color:blue;
		}
			
</style>
	<div>hello css</div>

外部样式
定义css资源文件:在head标签内，定义link标签，引入外部的资源文件

* a.css文件：
	div{
		color:green;
	    }
		<link rel="stylesheet" href="css/a.css">
		<div>hello css</div>
		<div>hello css</div>

注意：
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用，后期常用2,3
- 3种格式可以写为：
  1
  2
  3
  <style>
  @import "css/a.css";
  </style>

css语法：

格式：

选择器 {
		属性名1:属性值1;
		属性名2:属性值2;
		...
		    }

注意：每一对属性需要使用；隔开，最后一对属性可以不加；
选择器：筛选具有相似特征的元素
- 分类：
  - 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
      - 语法：#id属性值{}
    2. 元素选择器：选择具有相同标签名称的元素
      - 语法：标签名称{}
    3. 类选择器：选择具有相同的class属性值的元素。
      - 语法：.class属性值{}
      - 注意：类选择器选择器优先级高于元素选择器
  - 扩展选择器：
    1. 选择所有元素：
      - 语法： *{}
    2. 并集选择器：
      - 选择器1,选择器2{}
    3. 子选择器：筛选选择器1元素下的选择器2元素
      - 语法：选择器1 选择器2{}
    4. 父选择器：筛选选择器2的父元素选择器1
      - 语法：选择器1 > 选择器2{}
    5. 属性选择器：选择元素名称，属性名=属性值的元素
      - 语法：元素名称[属性名=”属性值”]{}
    6. 伪类选择器：选择一些元素具有的状态
      - 语法：元素:状态{}
      - 如：
      - 状态：
        
        link：初始化的状态
        
        visited：被访问过的状态
        
        active：正在访问状态
        
        hover：鼠标悬浮状态
属性
- 字体、文本
  - font-size：字体大小
  - color：文本颜色
  - text-align：对其方式
  - line-height：行高
- 背景
  - background：
- 边框
  - border：设置边框，符合属性
- 尺寸
  - width：宽度
  - height：高度
- 盒子模型：控制布局
  - margin：外边距
  - padding：内边距
  - 默认情况下内边距会影响整个盒子的大小
  - box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
  - left
  - right

HTML

基本标签

表格标签

表单标签

CSS

CSS的使用：CSS与html结合方式

css语法：