Html的基本使用_hsides html-CSDN博客

本文链接：https://blog.csdn.net/qq_38066923/article/details/89163309

HTML(Hypertext Markup Language)即超文本标记语言

HTML特点

HTML 不需要编译,直接由浏览器执行
HTML 是一个文本文件
HTML 文件必须使用html或者xml为文件后缀名
HTML 不区分大小写

HTML 基础语法

HTML 基本结构

<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    网页主题内容
  </body>
</html>

HTML 标签
- 语法 <标签名></标签名>
- 规范
  1. <>必须括起来
  2. 一般成对出现结束标签比开始多了个《、》
  3. 单标签：没有结束标签
HTML 标签属性

语法：<标签名属性名=‘值’ 属性名2=‘值’></标签名>；
HTML 注释
- 注释不在网页中显示

网页DOCTYPE文档类型声明

<! DOCTYPE>```声明不是HTML 标签
<! DOCTYPE>```声明不是HTML 标签

网页编码设置

在<head></head> 中添加
<meta http-equiv=“Content” contect=“text/html;charset=utf-
8”/>

基本标签

文字和段落标签

标题<h1> </h1> <h6></h6>
换行标签<br/>
段落<p> </p> align 对齐属性

值描述
left 左对齐内容
right 右对齐内容
center 居中
水平线<hr/>

属性描述
windth 设置水平线宽度，可以百分比
color 设置水平线的颜色
alogn 设置水平线居中
noshade 设置水平线无阴影
不常用
- 文字斜体<i></i>
- 加粗<b></b>
- 下标 <sub>
- 上标<ins>
- 删除内容 <del>

值	描述
left	左对齐内容
right	右对齐内容
center	居中

属性	描述
windth	设置水平线宽度，可以百分比
color	设置水平线的颜色
alogn	设置水平线居中
noshade	设置水平线无阴影

特殊符号

属性	显示结构	表示
&lt；	<	小于号
&gt；	>	大于号
`®`	®	已注册
`©`		版权
&nbsp；	Space	空格

列表

无序列表
```
<ul>
  <li>列表项</li>
</ul>
```
Type 属性

值描述
disc 圆点
square 正方形
circle 空心圆
有序列表
```
<ol>
  <li>列表项</li>
</ol>
```

值	描述
disc	圆点
square	正方形
circle	空心圆

列表标签

定义标签

<dl>
  <dt>定义列表项</dt>
  <dd>列表项描述</dd>
  <dd>列表项描述</dd>
</dl>

图像标签

<img src="" alt="" …/>

img 属性

属性	值	描述
Src(必写)	URl	显示图像和url
alt	文字	图片替代文件
height	数值和百分比	图像的高
wodth	数值和百分比	图像的宽超链接标签

<a href="">内容</a>

属性	描述
href	链接地址
target	链接的目标窗口 _Self _blank _top _parent
title	链接提示文字
name	链接提示文字

表格

<table align="center" border="1" width="500px" cellpadding="10px" cellspacing="0"> 
  	<!-- colspan  跨列 -->
  	<!-- rowspan 跨行 -->
  <tr bgcolor="rgb(253,253,231)" >
    <th rowspan="2">城市</th>  
	<th colspan="2">2014年</th>
	<th rowspan="2">2015年</th>
	<th rowspan="2">2016年</th>
</tr>
 <tr bgcolor="rgb(253,253,231)">
 
    <th>上半年</th>    
	<th>下半年</th>

</tr>
<tr align="center">
	<th bgcolor="rgb(227,246,252)"> 北京</th>
	<td>8000</td>
	<td>9000</td>
	<td>10000</td>
	<td>12000</td>

</tr>
<tr align="center">
	<th bgcolor="rgb(227,246,252)"> 上海</th>
	<td>8000</td>
	<td>9000</td>
	<td>10000</td>
	<td>12000</td>

</tr>
  </table>    
</body>

表格属性

属性	值	描述
align	left center right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式
bgcolor	rgb(x,x,x) #xxxxxx colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框那个部分可见
rules	none groups rows colsall	规定哪部分不可见
cellpadding	% pixels	规定单元边沿与其内容之间的空白
cellspacing	% pixels	规定单元格之间的空白
width	% pixels	规定表格的宽度。

表单

type属性值	描述
text	文字域
password	密码域
file	文件域
checkbox	复选框
radio	单选
Button	按钮
Submit	提交按钮
Reset	重置

属性	描述
Name	文字域的名称
MAXlength	用户输入最大的字符长度
Size	指定文本框的宽度，以字符个数为单位
Value	指文本框的默认值
placehoder	输入字段的提示

下拉菜单和列表


<select>
<option value=” “>选项</option>
<option value=” “>选项</option>
</select>

属性	描述
name	设置下拉菜单和列表的名称
multiple	设置也选择多个选项
size	设置列表可见选择的数目

option 属性

属性	描述
selected	设置选择初始状态
value	定义送往服务器的选项值

form 标签

属性	值	描述
action	URL	提交表单时向何处发送表单数据
method	get/post	设置表单以何种方式发送到指定页面
name	form_name	表单的名称
target	_blank ,_self , _ parent , _top	在何处打开action URL