HTML基础

最新推荐文章于 2024-12-16 16:52:23 发布

没心没肺可苦可乐

最新推荐文章于 2024-12-16 16:52:23 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_17492249/article/details/86579291

本文详细介绍了Web标准的构成，包括由W3C制定的结构（HTML）、由ECMA制定的行为（JavaScript）以及表现（CSS）标准。深入探讨了HTML的基本结构、语法以及常用标记，如标题、段落、列表、图片、超链接、表格和表单等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Web标准

web标准是网页制作的标准，他不是一个标准，是由一系列标准组成；

a）W3C——万维网联盟，制定了结构和表现的标准

b）ECMA——欧洲电脑厂商联合会，制定了行为标准

1.结构（HTML）

2.表现（CSS）

3.行为（Javascript）

HTML基本结构

1.文档声明

作用:

告知浏览器使用哪种html或xhtml规范

语法:

<!DOCTYPE html>|<!doctype HTML>|<!doctype html>

2.网页根元素（html）

所有的标记和网页内容必须放在<html></html>标签之间.

head

用来设置编码字符、网页标题、关键词、标述、引入一些外部文件

body

放置所有需要在网页中显示的内容以及内容的标记

HTML基本语法

1.常规标记

语法:<标记属性="属性值" >xxx</标记>

注:

a)标记名称必须小写,属性和属性值之间用等号连接,属性值需要加双引号.

b)所有标点符号都必须是英文状态下的

c)多个属性之间用空格隔开

2.空标记

语法:<标记属性="属性值" />

html常用标记

1.网页内容标题

语法:<hx></hx>

x代表1-6;

2.段落文本

语法:<p> </p>

3.转义字符

4.强制换行

<br />

5.加粗文本

<strong></strong>;

<b></b>

6.倾斜文本

<em></em>;

<i> </i>

7.水平分割线

8.上标和下标

^上标

_下标

9.列表

1.有序列表
语法:
<ol>
```
<li>列表项内容</li>
```
```
<li>列表项内容</li>
```
</ol>
2.无序列表
<ul>
```
<li>列表项内容</li>
```
```
<li>列表项内容</li>
```
</ul>
3.自定义列表
语法:
<dl>
```
<dt>名词</dt>
```
```
<dd>解释</dd>
```
</dl>

10.插入图片

<img src="目标文件路径" title="提示文本" alt="图片替换文本" />

alt和title的区别

title是当鼠标悬停在图片上时显示的提示信息

alt是当图片由于某些原因加载失败时显示的替换信息

11.超链接

<a href="链接" target="_blank" title="提示信息”>文本或图片</a>

target="_blank" 设置超链接在新窗口打开

target="_self"设置超链接在本窗口打开

12.表格

语法:

<table>

<tr>

  <td></td>

</tr>

</table>

说明:--tr表示行;--td表示列

<th></th>定义表格的表头(有居中加粗效果)

<caption>表格标题</caption>

标签
- <caption>标题</caption>
- <th>表头</th>
- <tr>行</tr>
- <td>列<td/>
- 主题<tbody>
- 页眉<thead>
- 页脚<tfoot>
属性
- width
- 宽度
- height
- 高度
- border
- 给表格添加边框
- bordercolor
- 边框颜色
- cellspacing
- 设置单元格间距
- cellpadding
- 设置内容和单元格之间的间距
- colspan
- 合并列
- rowspan
- 合并行
- align
- 设置单元格内容的水平对齐方式

14.div

作用:无语义标签,主要用于布局和划分版块

语法:<div></div>

说明:<div>标签可以把文档分割成独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>,那么该标签的作用会变得更加有效。

15.span

语法：

<span></span>

说明：<span></span>文本节点可以是某一小段文本，或是某一个字。

16.iframe框架

作用：将外部文件的内容嵌入到本页面中的某个位置。

语法：<iframe src="文件路径" width="宽度值" heigh="高度值" frameborder="边框大小数值"

注：如何去掉或隐藏iframe的滚动条：

  scrolling=“no”

17.HTML注释

概要: 拓展：href和src的区别

src是将某个外部文件嵌入到本页面中标签所在的位置，常用的有：img、script
href表示超文本引用，用来建立当前元素和文档之间的链接。常用的有a、link

表单

语法：<form method="传送方式" action="服务器端文件"></form>

作用：搜集用户信息

注:所有表单都要放在form标签中

拓展：get和post的区别：

a）get用来获取数据，post用来发送数据；

b）get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送数据，用户看不到这个过程。

c）get可以传送的数据量较小，一般不能超过2kb，post可以传送的数据量更大，理论上没有限制。

d）get安全性较低，post安全性更高。

1.文本框

<input type="text" value="默认值" placeholder="提示文本"/>

2.密码框

<input type="password" placeholder="提示文本"/>

3.提交按钮

<input type="submit" value="按钮内容"/>

4.重置按钮

<input type="reset" value="按钮内容"/>

5.单选按钮

<input type="radiobutton" name="" checked=” checked“/>

注：一组中的单选按钮设置一致的name属性值可以达到多选其一的效果。

6.复选按钮

<input type="checkbox" name="" checked=” checked“/>

7.普通按钮

<input type="button" value=”按钮文字“/>

注：普通按钮不具备提交功能，通常结合JS点击事件来使用

  普通按钮默认文字内容为空，可通过value属性值设置

8.下拉列表

语法：

＜select>

<option>列表项1</option>

<option>列表项2</option>

  ......

＜/select>

注：selected改变默认选中项

9.文本域

语法：

<textarea rows="行数" cols="字符宽度"></textarea>

拓展：禁止用户拖拽改变文本域大小，需添加属性 style="resize:none;"