HTML

最新推荐文章于 2024-06-19 12:50:25 发布

羊咩咩a284811

最新推荐文章于 2024-06-19 12:50:25 发布

阅读量190

点赞数

分类专栏：学习经验文章标签： html

本文链接：https://blog.csdn.net/qq_43477676/article/details/111422379

版权

学习经验专栏收录该内容

35 篇文章 2 订阅

订阅专栏

1.HTML

全称：hypertext markup lanuage 超文本标记语言。
作用：网页制作。
软件结构分类：
C/S（Client-Server）：
特点：
1.必须安装特定客户端
2.服务端升级，客户端必须升级。
B/S（Broswer-Server）：
特点：
1.不需要特定的客户端（只需要一个浏览器软件）。
2.服务器端升级，不需要升级客户端。
服务器存放了网站，网站由网页组成，网页有html标签组成。

html：文本+特定标签：超级文本
html重点：学习标签的使用

2.HTML语法 2.1 html文件结构：HTML文件后缀名 .html 或 .htm

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

2.2 html文件头

<head>  
</head>

告诉浏览器怎么解析这个文件。

2.3 html文件体

<body>
</body>

这部分可以让用户看见

2.3.1 标题

<h1>标题1</h1>
<h2>标题2</h2>

标题1

标题2

2.3.2 段落

<p></p>

<p>
段落1
</p>
<p>
段落2
</p>

段落1

段落2

段落缩进

<blockquote>
段落缩进
</blockquote>

段落缩进

上下标

y=x<sup>2</sup>
y=x<sub>2</sub>

y=x²
y=x₂

2.3.3 换行

y=x<sup>2</sup><br/>y=x<sub>2</sub>

y=x²
y=x₂

2.3.4 原样输出

<pre>
1,2,3,4,5,6,7,8
                      9.10.11.12
</pre>

1,2,3,4,5,6,7,8
                      9.10.11.12

2.3.5 水平线条

<hr/>

2.3.6 列表

无序列表（ul li）

有序列表（ol li）

项目列表（dl dt dd）

无序序列

<ul>
     <li>羊咩咩</li>
     <li>咩咩羊</li>
     <li>咩咩咩</li>
     <li>羊羊羊</li>
</ul>

羊咩咩
咩咩羊
咩咩咩
羊羊羊

<ul type="square">
     <li>羊咩咩</li>
     <li>咩咩羊</li>
     <li>咩咩咩</li>
     <li>羊羊羊</li>
</ul>

有序序列

<ol>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

one
two
three
four

type属性：可以设置序号的样式

<ol type="A">
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

项目序列

<dl> 
     <dt>IT</dt>
     <dd>IT1</dd>
     <dd>IT2</dd>
     <dd>IT3</dd>
     <dd>IT4</dd>
     <dt>AB</dt>
     <dd>ab</dd>
</dl>

IT1

IT2

IT3

IT4

2.3.7 字体颜色表示： 1.英文：red blue 2.使用颜色的6位16进制的值：黑色# 00 00 00(红绿蓝) ，白色：# ff ff ff(红绿蓝) ，红色：# ff 00 00(红绿蓝) ，蓝色：# 00 00 ff(红绿蓝)。

<font color="blue"  size=6>羊咩咩 </font>
<font color="#000000">羊咩咩 </font>

羊咩咩
羊咩咩

块标签

<div></div>
<span></span>

结合CSS进行网页的布局。

3.特殊字符

原样输出特殊字符，需要转义。
特殊字符转义

  <              &lt;
  >              &gt;

空格   &nbsp;
注册商标  &reg;
版权   &copy;
&lt;h1&gt;&nbsp;&nbsp;&nbsp;&nbsp;空格

空格
注册商标 ®
版权 ©
<h1> 空格

4.超链接

导向资源
常用属性：
href：指向的资源路径（地址）
注意：herf中的任何资源路径都是带有协议，默认不写，则带file://协议。
常见的协议:
file:// 本地文本协议。用于在本地文件系统中查询文件(可以不写)
http:// http协议，超文本传输协议,找互联网上的资源。
ftp:// 文件上传下载协议
mailto:// 调用发送邮件客户端的协议
thunder:// 调用迅雷客户端的协议
target:打开方式。_self:在当前窗口打开，_blank:新窗口打开。
1.普通文件（html文件，图片文件等）
2.连接到锚点
打锚点:
连接到锚点:(可以链接到其他页面)

<a href="1.html">超链接到文件</a>
<a href="1.jpg">超链接到图片</a>
<a href="http://www.baidu.com">超链接到网站</a>
<a href="mailto:yanglledu@sina.com">发送邮件给羊咩咩</a>
<a href="http://www.aqlife.com/羊咩咩.avi">下载电影《羊咩咩》</a>
<a href="thunder://www.aqlife.com/羊咩咩.avi">迅雷下载电影《羊咩咩》</a>
<a href="1.html" target="_self">超链接到文件，在当前窗口打开</a>

超链接到文件
 超链接到图片
 超链接到网站
 发送邮件给羊咩咩
 下载电影《羊咩咩》
迅雷下载电影《羊咩咩》
超链接到文件，在当前窗口打开
锚点

<p>a<a href=“#b”></p><br/>

打锚点

<a name = "b"></a>
<p>b</p>

5.图像标签

<img/>

常用属性:
1.src属性:图像源的路径。
src = “url”；
可以是相对路径也可以是绝对路径。
2.alt:替代文本，当src属性失效时，替代文本就会失效。
3.title:提示文本，当鼠标放上去时，提示文本。
4.width heigth:宽和高 px:像素
5.border 边框

<img src=“1.jpg” alt=“这是picture” title=“提示” width=“100px” heigth=“80px” border=“3px”>

5.表格标签

<table>表格
<caption>标题
<thead>表格头部
<tbody>表格主体
<tfoot>表格尾部
<th>表头
<tr>表格的一行
<td>一行的一个单元格

常用属性：
align 对齐方式 left right center
width+height 宽+高
border 边框
rowspan 行合并
colspan 列合并

<caption> 标题 </caption>
<table border="1" width="100px"  height = "100px" align ="center">
         <caption><font color=“blue” size=“5”> 标题 1</caption>
         <tr>
                <th>name</th>
                <th>class</th>
                <th>score</th>
         </tr>
         <tr>
               <td align="center" rowspan=“2”>羊咩咩</td>
               <td>one</td>
               <td>100</td>
         </tr>
         <tr>
               <td align="center">羊咩咩</td>
               <td>one</td>
               <td>99</td>
         </tr>
         <tr>
               <td  colspan="2">平均分</td>
               <td>99</td>
         </tr>
</table>

标题

标题 1
name	class	score
羊咩咩	one	100
羊咩咩	one	99
平均分		99

问题：服务器去读取html网页时，遇到table标签时，必须等到结束标签读取完毕，才把整个table的内容返回给用户。加强用户体验：table可以使用以下标签把table划分为三个部分。表格头部表格主题表格脚部加上三个标签后，只要服务器读完任何一个部分的内容，就会立即返回给用户。

<table brder="1" width="100px"  height = "100px" align ="center">
         <caption><font color=“blue” size="5"> 标题2 </caption>
         <thead>
         <tr>
                <th>name</th>
                <th>class</th>
                <th>score</th>
         </tr>
         </thead>
         <tbody>
         <tr>
               <td align="center" rowspan=“2”>羊咩咩</td>
               <td>one</td>
               <td>100</td>
         </tr>
         <tr>
               <td align="center">羊咩咩</td>
               <td>one</td>
               <td>99</td>
         </tr>
         </tbody>
         <tfoot>
         <tr>
               <td  colspan="2">平均分</td>
               <td>99</td>
         </tr>
         </tfoot>
</table>

标题2
name	class	score
羊咩咩	one	100
羊咩咩	one	99
平均分		99

6.html表单表单标签

<form></form>

表单的作用：收集用户的数据，提交给后台处理。
常用属性：
action：把当前表单的数据提交到哪里。
method：提交方式。get方式，post方式。

<form action=“/a/b” method="post">
         用户名:<input type="text" name="username"/><br/>
         密码:<input type="password" name="userpassword"/><br/>
         <input type="submit" value="注册"/>
</form>

注意：后台程序要能够接受表单的控件输入的数据，必须在控件加上一个name属性。
get方式：会把用户提交的数据暴露在地址栏。不适合提交敏感数据。不适合提交比较多的内容（不大于1kb）
post方式：不会把用户提交的数据暴露。可以提交敏感的数据。适合任何大小的内容（文件上传必须使用post）

常见的表单控件：
<input type = "text"/> 单行输入域。只能输入一行字符。
属性：
name：该属性一直带上，因为后台程序接收必须使用name属性。
size：输入字符长度。
readonly：只读不能写。
value：默认值。

<input type = "password"/> 密码输入域。输入的数据不能明文显示。
属性：
name：该属性一直带上，因为后台程序接收必须使用name属性。
size：输入字符长度。
readonly：只读不能写。
value：默认值。

<input type = "radio"/> 单选按钮。
属性：
name：该属性一直带上，因为后台程序接收必须使用name属性。如果作为同一组内容，name属性值必须相同。
size：输入字符长度。
readonly：只读不能写。
value：默认值。也是传递到后台程序的数据内容，必须带上。
checked：默认的选择状态，把checked加在哪里，哪里就被选上。

<input  type = "checkbox"/>

name：该属性一直带上，因为后台程序接收必须使用name属性。如果作为同一组内容，name属性值必须相同。
value：默认值。也是传递到后台程序的数据内容，必须带上。
checked：默认的选择状态，把checked加在哪里，哪里就被选上。（可以多选)

<input type="file"/> 文件选择框

 <select> 下拉选择框
        <option>
        </option>
 </select>

name：该属性一直带上，因为后台程序接收必须使用name属性。
select：可以让select显示多个选项。
multiple：可以让用户选择多个选项。

 <textarea> </textarea>：多行输入域。

name：该属性一直带上，因为后台程序接收必须使用name属性。
rows：可以输入几行。
cols：可以输入几列。

<input type ="submit"/>：提交按钮，把form表单中的所有数据提交到后台程序处理。

<input type ="reset" />：重置按钮，把form表单中的所有数据还原为初始状态。

<input type ="button" />：普通按钮，

<input type="hidden">：隐藏域，需要传递数据到后台，但又不希望显示该数据。

checked：默认的选择状态，把checked加在哪里，哪里就被选上。（可以多选)
属性：
name：该属性一直带上，因为后台程序接收必须使用name属性。如果作为同一组内容，name属性值必须相同。
size：输入字符长度。
readonly：只读不能写。
value：默认值。也是传递到后台程序的数据内容，必须带上。

checked：默认选中状态，把check加到哪里，哪里就被选中。

<form action=“/a/b” method=“post”>
         <input type="hidden" name="id" value=“1”/><br/>
         用户名:<input type="text" name="username" size="10" readonly=“readonly” value=“羊咩咩”/><br/>
         密码:<input type="password" name="userpassword"/><br/>
         <input type="submit" value="注册"/>
         性别：<input type=“radio” name=“gender” value=“男” checked=“checked”/>男                 <input type=“radio” name=“gender” value=“女” checked=“checked”/>女
         兴趣：<input type="checkbox" name=“hobby”  value=“吃” checked=“checked”>吃
                    <input type="checkbox" name=“hobby”  value=“喝” checked=“checked”>喝
                    <input type="checkbox" name=“hobby”  value=“玩” checked=“checked”>玩
                    <input type="checkbox" name=“hobby”  value=“乐” checked=“checked”>乐
          请上传图像：<input type="file"/>
          请选择地址
          省份：
          <select name="province" size="3"  multiple="multiple" >
                     <option value="a">a</option>
                     <option>b</option>
                     <option>c</option>
                     <option>d</option>
          </select>
          城市：
         <select name="city">
                     <option selected=“selected”>a1</option>
                     <option>b1</option>
                     <option>c1</option>
                     <option>d1</option>
          </select><>
          介绍：
          <textarea rows="5" clos=“5” /></textarea>
          提交：
          <input type ="submit" value="注册"/>
          <input type ="reset" value="重置"/>
          <input type ="button" value="普通按钮"/>
</form>

7.框架标签

框架标签不能放在<body>里面，需要放在<head>和<body>之间。
有两个以上或两个以上的<frame/>就需要放到<frmeset/>标签中。
<frameset/>框架集，框架集可以包含多个框架。
<frame/>框架，框架内包含页面
<iframe/> 画中画框架，页面中包含其他页面。

<frameset>
      <frame src="head.html"/>
      <frameset>
            <frame src="left.html"/>
            <frame src="center.html"/>
      </frameset>
</frameset>

上边的页面head.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script></script>
</head>
<body>
     <h3>logo</h3><br/>welcome,羊咩咩 &nbsp; [exit]
</body>
</html>

左边的菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
       <ul>
           <li>
               Teacher Information
           </li>
           <li>
               Student Information
           </li>
           <li>
               School Information
           </li>
           <li>
               College Information
          </li>
       </ul>
</body>
</html>

右边的菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
        Welcome to the information management system.
</body>
</html>

底部页面：footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
      Copy&copy;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;School&reg;
</body>
</html>

拼接：
注意，拼接框架代码需要放在head和body之间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Information Management</title>
</head>
<frameset rows="20%,70%,*">
      <frame src="a.html"/>
      <frameset cols="20%,*">
          <frame src="b.html"/>
          <frame src="c.html"/>
      </frameset>
    <frame src="d.html"/>
</frameset>
<body>
</body>
</html>

实例：
在这里插入图片描述

在这里插入图片描述
写一个表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册界面</title>
</head>
<body>
<!--<fieldset>-->
    <!--<legend>注册用户</legend>-->
    <form>
<table algin="left" border="1" width="400px">
      <caption align="center">
          <font color="blue">新用户注册</font>
      </caption>
      <tr>
          <td>用户名：</td>
          <td align="center"><input type="text" name="username"/></td>
      </tr>
      <tr>
          <td>密码：</td>
          <td align="center"><input type="text" name="password"/></td>
      </tr>
      <tr>
          <td>性别：</td>
          <td><input type="radio" name=“gender” value="男"/>男 <input type="radio" name=“gender” value="女"/>女</td>
      </tr>
      <tr>
          <td>爱好：</td>
          <td><input type="checkbox" name="hobby" value="吃饭"/>吃饭 <input type="checkbox" name="hobby" value="睡觉"/>睡觉 <input type="checkbox" name="hobby" value="玩游戏"/>玩游戏</td>
      </tr>
      <tr>
          <td>城市：</td>
          <td>
              <select name="city">
                  <option>
                      请选择城市
                  </option>
                  <option name="上海">
                      上海
                  </option>
                  <option name="北京">
                      北京
                  </option>
                  <option name="深圳">
                      深圳
                  </option>
                  <option name="广州">
                      广州
                  </option>
              </select>
          </td>
      </tr>
      <tr>
          <td>
              头像
          </td>
          <td>
              <input type="file" name="head"/>
          </td>
      </tr>
      <tr>
          <td colspan="2" align="center">
              <input type="submit" value="确认"/> <input type="reset" value="取消"/>
          </td>
      </tr>
</table>
    </form>
<!--</fieldset>-->
</body>
</html>