编程

HTML简介与基本语法

文章目录
  1. 1. HTML简介
    1. 1.1. 基本格式
      1. 1.1.1. 基本结构
      2. 1.1.2. 基本语法

HTML简介

　　超文本标记语言（HyperText Markup Language）简称：HTML。是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
　　HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
　　HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

基本格式

基本结构

起始标记、网页标题、文件主体。
经典HTML例子：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

基本语法

标题

1
2
3
4
5
6
<h1>大标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>最小标题</h6>

注释

1
<!-- 注释 -->

水平线

1
<hr>

换行

1
<br/>

一个空格

1
&nbsp;&nbsp;

段落

1
<p>段落</p>

图片标签

1
<img src="_url_" alt="_some_text_">

超链接

1
<a  href="url">链接文本</a>

无序列表

1
2
3
4
5
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>

有序列表

1
2
3
4
5
<ol type="A">
<li>你</li>
<li>我</li>
<li>他</li>
</ol>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

表单方法

1
2
3
<FORM method="post" action="result.html">
...
</FORM>

其中method即为http请求方法，可以选择使用 get 或 post
● get是不安全的，在请求传输过程中数据被放在请求的URL中；而post的所有操作数据对用户完全不可见。
● get传送的数据量小，主要因为URL长度限制；而post传送的数据量较大，一般不被限制。

注意：表单组件必须被FORM标签包含，否则登陆清空按钮的操作无效。

表单组件
【文本框与按钮】

1
2
3
4
5
6
7
8
9
10
11
12
<h3>用户登陆</h3>
<!-- 单行文本框，可添加placeholder="xxx" 提示文本 -->
账号：<input type="text" /> <br/>
<!-- 密码框 -->
密码: <input type="password" /> <br/>
<!-- 登陆按钮 -->
<input type = "submit" value="登陆">
<!-- 清空按钮 -->
<input type = "reset" value="清空"> 

<!-- 数字文本框，被限制仅能输入数字 -->
<input type="number" name="" id=""> <br/>

【单项选择按钮】

1
2
3
性别：<input type="radio" name="sex" id="" value="男" /> 男
<input type="radio" name="sex" id="" value="女" checked /> 女
<!-- 使男女单选互斥，仅选择一个，必须将name名命名相同 -->

【多项选择按钮】

1
2
3
4
5
爱好：<input type="checkbox" name="love" id="" value="cf" />吃饭
<input type="checkbox" name="love" id="" value="sj" />睡觉
<input type="checkbox" name="love" id="" value="xx" />学习
<input type="checkbox" name="love" id="" value="ddd" />打豆豆
<!-- 将一组数据打包须使name名相同；默认选中需添加checked -->

【上传框】

1
头像：<input type="file" name="" id=""> <br/>

【下拉框】

1
2
3
4
5
6
籍贯：
<select name="" id="">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select><br/>

【多行文本框】

1
备注：<textarea name="" id="" cols="80" rows="10"></textarea> <br/>

【浮动窗口】

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1" width="100">
  <tr>
    <td width="20%">
	  <a href="./sy.html" target="wc">首页</a>  <br/>
	  <a href="./xc.html" target="wc">我的相册</a>  <br/>
	  <a href="./rj.html" target="wc">我的日记</a>
	</td>
	<td width="80%">
	<iframe src="./sy.html" frameborder="0" name="wc" width="100%" height="300"> </iframe>
	</td>
  </tr>
</table>

版权声明

Scholar’s Blog by scholargeek is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由董仕麟创作并维护的scholargeek博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于Scholar’s Blog博客，版权所有，侵权必究。

本文永久链接：https://scholargeek.github.io/2019/08/28/HTML/

更新日期:


本站总访问量 次