HTML简介#

1. 全称：Hyper Text Markup Language（超文本标记语言）
2. 作用：专门用来搭建网页的结构（骨架），比如文字、图片、按钮、表单、布局等。

了解基本骨架#

1
<!-- 文档声明：告诉浏览器这是HTML5文档 -->
2
<!DOCTYPE html>
3
<!-- 网页语言是中文（简体） -->
4
<html lang="zh-CN">
5
  <!-- 头部：给浏览器看的配置，不显示在页面上 -->
6
  <head>
7
    <meta charset="UTF-8">
8
    <!-- 设置网页字符编码为 UTF-8，保证中文不乱码 -->
9
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
    <!-- 网页适配手机，宽度跟随设备宽度，初始缩放比例 1:1 -->
11
    <title>我的第一个网页</title>
12
    <!-- 显示在浏览器标签栏上-->
13
  </head>
14

15
  <!-- 身体：页面所有可见内容都写在这里 -->
16
  <body>
17
    网页的文字、图片、按钮都在这里！
18
  </body>
19
</html>

标签#

1. 基础文本标签

   1
   <h1>一级标签</h1>
   2
   <p>一段文字</p>
   3
   <div>容器</div>
   4
   <strong>加粗</strong>
   5
   <em>斜体</em>
   6
   <del>删除线</del>
   7
   <ins>下划线</ins>
   8
   <br>    <!-- 换行 -->
   9
   <hr>    <!-- 水平分割线 -->
   

2. 超链接标签

1
<!-- 基本用法 -->
2
<a href="https://www.baidu.com">百度一下</a>
3
<a href="https://www.baidu.com" target="_blank">新页面打开</a>

href=“地址”跳转的目标链接    target=“_blank” 在新标签页打开链接

3. 图片标签

1
<img
2
        src="https://www.baidu.com/logo.png"
3
        alt="百度Logo"
4
        width="300" height="200">
5
>

src=“图片地址”    alt = alternative（替代文字）图片加载失败时，显示这段文字

4. 列表标签

   1. 无序列表 ul + li

      1
       <ul>
      2
         <li>列表项1</li>
      3
         <li>列表项2</li>
      4
         <li>列表项3</li>
      5
       </ul>
      

   2. 有序列表 ol + li

      1
      <ol>
      2
        <li>第一项</li>
      3
        <li>第二项</li>
      4
      </ol>
      

   3. 自定义列表 dl + dt +dd

      1
      <dl>
      2
        <dt>标题</dt>
      3
        <dd>描述内容</dd>
      4
      </dl>
      

5. 表格标签

   1. 基础表格 行tr 格子th/td（Table Header/Table Data）

   1
   <table border="1" width="400"> <!-- border=1 加边框，宽度width -->
   2
     <tr>    <!-- 第一行：表头 -->
   3
       <th>姓名</th>
   4
       <th>年龄</th>
   5
       <th>城市</th>
   6
     </tr>
   7
   
   8
     <tr>     <!-- 第二行 -->
   9
       <td>张三</td>
   10
       <td>20</td>
   11
       <td>北京</td>
   12
     </tr>
   13
   
   14
     <tr>    <!-- 第三行 -->
   15
       <td>李四</td>
   16
       <td>22</td>
   17
       <td>上海</td>
   18
     </tr>
   19
   </table>
   

   2. 合并单元格 rowspan/colspan=“x”

   1
    <table border="1">
   2
      <tr>
   3
        <th colspan="2">学生信息</th> <!-- 合并2列 -->
   4
      </tr>
   5
      <tr>
   6
        <td rowspan="2">张三</td> <!-- 合并2行 -->
   7
        <td>20岁</td>
   8
      </tr>
   9
      <tr>
   10
        <!-- 这里原本应该有<td>，但被合并了，所以删掉！ -->
   11
        <td>男</td>
   12
      </tr>
   13
    </table>
   

6. 表单标签

   1
   <!-- 文本框 -->
   2
   <input type="text" placeholder="请输入用户名">
   3
   <!-- 密码框 -->
   4
   <input type="password" placeholder="请输入密码">
   5
   <!-- 单选框 -->
   6
   <input type="radio" name="gender"> 男
   7
   <input type="radio" name="gender"> 女
   8
   <!-- 复选框 -->
   9
   <input type="checkbox"> 看书
   10
   <!-- 提交按钮 -->
   11
   <input type="submit" value="登录">
   12
   <!-- 普通按钮 -->
   13
   <input type="button" value="点击">
   

7. 下拉菜单 + 1<select>2 <option>北京</option>3 <option selected>上海</option> <!-- 默认选中 -->4 <option>广州</option>5 <option>深圳</option>6</select> 转义字符 1空格 &nbsp;2< &lt;3> &gt;4& &amp;5人民币 &yen;6版权 &copy;

   ---

   CSS#css 简介#CSS 是层叠样式表(Cascading Style Sheets)的简称。 CSS 主要用于设置HTML页面中的文本内容、图片外形以及版面的布局和外观显示样式。选择器# 标签选择器 1h3 {2 color: pink;3 font-size: 20px;4} id选择器 1#d {2 color: darkblue;3} 类选择器 基本写法 1.c {2 color: pink;3} 1<div class="c"> 粉色 </div> 多类名选择器 无空格：同时选中 c1、c2，优先级更高，会覆盖单个类名选择器 1<div class="c1 c2"> 多类名选择器 </div> /* 有空格 */ 1.c1.c2{ /* 无空格 */2 color: blue;3} 后代选择器 选中 c1 里的子元素 c2 1.c1 .c2{2 color: yellow;3} 通配符选择器 给所有的元素使用样式 1* {2 margin: 0;3 padding: 0;4}

   ---

   字体属性#1body{font: italic bold 20px/1.5 "Microsoft YaHei";}2/* 字体格式 字体粗细 字体大小/一行文字高度 “字体” */ font-style font-weight font-size line-height font-family italic 斜体/normal 字体粗细 normal(400)/bold(700) 字体大小 20px 一行文字所占的高度 字体

   ---

   文本属性# 文字颜色 预定义的颜色值 十六进制 RGB代码 blue/red… #ff0000 rgb{255,0,0}/rgb{100%,0%,0%} 水平对齐 1p{2 text-align: left;3 text-align: center;4 text-align: right;5} 文本装饰 text-decoration 默认 下划线 上划线 删除线 none underline overline line-through 文本缩进 text-indent： 2em; em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。 行间距 line-height line-height: 1.5; line-height: 30px; 字间距 letter-spacing letter-spacing: 2px;

   ---

   样式表# 行内样式表 写在标签里 1<div style="color:red; font-size:20px;">我是红色文字</div> 内部样式表 写在 head 里 1<head>2 <style>3 div {4 color: blue;5 font-size: 20px;6 }7 </style>8</head> 外部样式表 新建 style.css，在HTML中引入，放在head 1<link rel="stylesheet" href="style.css">2/* rell=引入的是stylesheet样式表;href=引入的css文件路径*/

   ---

   JavaScript#