WEB 学习第一天

发表于 分类于

HTML 简单介绍

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

标签

基本结构

HTML 页面是由一堆标签组成的.
包括 html,head,body 等.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

<head>
<meta charset=utf8 /> 
<title>this is Title.</title>    
    
</head>
<body>
<h1>这是一级标题</h1>
<p>This is my first paragraph.</p>
<hr />
<a href = "https://www.baidu.com">百度一下你就知道</a> <br />
<p>This is my second paragraph.</p>
</body>
</html>

解释

  • title 标签是用来设置页面标题, 写在 head 标签中
  • meta 标签用来设置一些页面初始化信息, 没有结束标签, 称为单标签
  • h{number} 标签, 标题标签, number 取值 1-6, 对应 1-6 级标签
  • p 标签, 段落标签
  • hr 水平线标签
  • a 标签, 超链接(锚)标签, 用于设置超链接
  • href = "xxx", 属性, 这里第一次接触到属性, 在后面会遇到很多
  • br 换行标签

图片

1
<img src = "url" alt = "text"  title = "some text" />
  • src 图片源属性, 值为图片路径, 可以是在线 url, 亦可以是本地图片(注意文件路径)
  • alt 在图片地址失效时显示的文本
  • title 当鼠标悬停在图片上面显示的文本

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
  • tatle 表格标签, 所有表格应该以它为开始
  • th 表头标签, 定义表头
  • tr 行标签, 定义表格行
  • td 列标签, 定义表格列
  • border 表格线宽度, 更建议使用后面的 CSS 来设置
  • caption 标题标签

横跨两列的单元格

1
2
3
4
5
6
7
8
9
10
11
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
姓名 Bill Gates
电话 555 77 854
555 77 855

列表

无序列表

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

定义列表

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

列表嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

div & span

这两个标签无实际意义, div 是块级元素, 其特点是独占一行, span 是行内联元素, 配合 CSS 用的很多

进阶一点点

不知道什么标题(为 CSS 做铺垫吧)

  • id 元素的 id 属性, 指定 HTML 元素的唯一 ID, id 属性的值在 HTML 文档中必须是唯一的.
    id 属性用于指向样式表中的特定样式声明. JavaScript 也可使用它来访问和操作拥有特定 ID 的元素
  • class 元素的 class 属性, 可以有多个

表单

form 元素

用于接收提交用户的提交信息

  • action 规定当提交表单时向何处发送表单数据
  • method post|get 规定用于发送 form-data 的 HTTP 方法
  • name 规定表单的名称

input

  • text & password 文本域和密码域

    1
    2
    3
    4
    5
    <form action="./index.html" method="get" name="xxx"> 
    用户名：<input type="text" name="username">
    <br />
    密码：<input type="password" name="password">
    </form>

  • checkbox 复选框

    1
    2
    3
    4
    <form action="./index.html" method="get" name="xxx">
    爱好：<input type="checkbox" name="hobby" />篮球
          <input type="checkbox" name="hobby" /> 游戏
    </form>

  • radio 单选框
    注意：需要为每个选项设置同一 name 属性值

    1
    性别：<input type="radio" name="sex" checked /> 男 <input type="radio" name="sex" /> 女

    这里的 checked 表示默认选中状态

  • select 下拉列表

    1
    2
    3
    4
    5
    6
    城市：
    <select name="address">
        <option value="SiChan">四川</option>
        <option value="GuangDong" selected>广东</option>
        <option value="ShangHai">上海</option>
    </select>

  • textarea 文本域

    1
    2
    3
    <textarea rows="10" cols="30"> 
      The cat was playing in the garden.
    </textarea>

    rows & cols 默认行列宽度

  • submit 提交

    1
    <input type="submit" value="提交">

    用于将表单数据提交到 action 指定的位置

  • label 用于创建链接, 提交用户体验

    1
    <input type="checkbox" name="hobby" value="0" id="bass" /> <label for="bass">篮球</label>

    此时点击“篮球”也会识别

开始 CSS 了, HTML 真是太无趣了….