HTML 页面入门【8 月 11 日 13 点 20 左右】

什么是 HTML

大名：Hyper Text Markup Language

寓意：超文本标记语言

学习常用标签

字体标签
size="1-7"

段落标签
有首有尾，
”
不能混用

注释标签

HTML 中常用转义字符

<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>first.html</title>
    <meta charset="utf-8">
</head>
<body>
<p><慕课网>是垂直      的互联网"IT"技能免费学习网站。</p>
以独家视频教程、在线编程      工具、学习计划、问答社区为核心特色。</p>
在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网 IT 技术。</p>
慕课网是垂直的互联网 IT 技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。</p>
在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网 IT©技术。</p>
</p>
</body>
</html>

重点注意
1、转义字符各字符之间不能出现空格。
2、转义字符必须以";"结束。
3、单独的"&"不被认为是转义字符的开始。
4、转义字符区分大小写。

标题标签

给 seo 优化
h1：大标题 h2：副标题 h3：栏目标题 456 很少用

img 图片标签

超级链接标签

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>first.html</title>
</head>
<body>
  <a href="welcome.html">打开新页面</a>
  <a href="http://www.imooc.com">慕课网</a>
  <a href="image/1.jpg">打开一个图片</a>
  <a href="http://www.imooc.com" target="_blank">
      <img src="image/1.jpg"></a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>welcome.html</title>
</head>
<body>
  <h1>我的新页面</h1><!--块级-->
  <a href="first.html">单击此处返回首页
</body>
</html>

锚点标签

要保证最后一个页面，最后一段内容打开内容是完整的，不能出现半点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>我的新页面</h1>
<a href="first.html">单击此处返回首页
<p>
<p></p><a href="first.html#num-1">w 锚点 1</a></p>
<p></p><a href="first.html#num-2">w 锚点 2</a></p>
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first.html</title>
</head>
<body>
<a href="welcome.html">打开 welcome.html
<p></p><a href="#num-1">锚点 1</a></p>
<p></p><a href="#num-2">锚点 2</a></p>
<a name="num-1">
<p>num-1 先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p>
<p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p> <p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p> <p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p>
</a>
<a name="num-2">
<p>num-2 先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p>
<p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p> <p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p> <p>先查出来 goods 表中的 sum，然后再做减法，入库，然后再更新,这个是实际想命重要非常简单的一个业务逻辑</p>
</a>
</body>
</html>

无（有）序列表

无序列表

表格

表格：table、tr、td、border、width
作用：用于表格、行、列、宽度、边框的制作

合并表格行列

合并行列：colspan、rowspan
作用：用于将表格内的某些行、列进行合并
rowspan="2" ：是删掉紧挨着的下一行的同位置的
colspan="2" ：是删掉紧挨着这 td 的下面几列
合并四个格子：colspan="2" rowspan="2"
垂直居中
居中
标签是表格的表头，表头部分会默认加粗

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>first.html</title>
</head>
<body>
    <table border="1" width="500" cellspacing="0" cellpadding="5px" align="center">
      <caption>员工表</caption>
      <tr bgcolor="pink" align="center">
      <th>姓名</th>
      <th>性别</th>
      <th>生日</th>
      <th>工资</th>
    </tr>
    <tr align="center">
      <td>张三</td>
      <td rowspan="2">男</td>
      <td>1234</td>
      <td>1259</td>
    </tr>
    <tr align="center">
      <td>李思</td>
      <td>2222</td>
      <td>3232</td>
    </tr>
  </table>
</body>
</html>

表格的其他标签

表单

什么是表单？
作用：用于收集用户信息、注册，进行人机交互操作
包含元素：文本框、单选按钮、列表框、图片框、复选框等，这些元素，统称“控件”

给下拉菜单中的选项，设置默认选中状态：

为<option 标签添加 selected 属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="">
    <label>请输入姓名：</label>
       <input type="text" name="" id=""><br>
    <label>请输入密码：</label>
       <input type="password" name="" id=""><br>
    <label>再次输入密码：</label>
       <input type="password" name="" id=""><br>
    <label>性别：</label>
       <input type="radio" name="xb" id="" value="男">男
       <input type="radio" name="xb" id="" value="女">女<br>
    <label>兴趣爱好：</label>
       <input type="checkbox" name="xb" id="" value="游泳">游泳
       <input type="checkbox" name="xb" id="" value="看书">看书
       <input type="checkbox" name="xb" id="" value="爬山">爬山
       <input type="checkbox" name="xb" id="" value="思考">思考<br>
    <label>生日：</label>
        <select>年
            <option value="1995">1995</option>
            <option value="1996">1996</option>
            <option value="1997" selected="selected">1997</option>
            <option value="1998">1998</option>
            <option value="1999">1999</option>
            <option value="2000">2000</option>
        </select>
        <select>月
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
        </select>
        <select>日
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
        </select><br>
        头像<img src="image/toolbar/about.png">
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select><br>
        <input type="button" value="普通按钮">
        <!--在当前前台程序进行处理 -->
        <input type="submit" value="提交按钮">
        <!--进入后台 -->
</form>
</body>
</html>

表单其他控件

普通列表框（非下拉列表框)

- <select size="6" multiple="true"><!--可以多选-->
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

隐藏域：进行信息的传递，前端信息不方便显示，但需要让后台得到、或者后台的数据要给页面显示的
```
 000000
```
上传控件：

  <input type="file" ><input type="button" value="上传">

多行文本框

<textarea rows="5" cols="30"  naem="" id="">请输入</textarea>

提示：文本框中的字体内容可以使用 placeholder 属性完成，如：
```
<input type="text" name="username" placeholder="用户名" />
```

HTML入门

HTML 页面入门【8 月 11 日 13 点 20 左右】

学习常用标签

字体标签

段落标签

注释标签

HTML 中常用转义字符

标题标签

img 图片标签

超级链接标签

锚点标签

无（有）序列表

表格

合并表格行列

表格的其他标签

表单

表单其他控件

Hi，您需要填写昵称和邮箱！