HTML基础标签与语法

HTML基础语法

1.HTML基础结构

在这里插入图片描述

2.网页编码设置

当网页显示出现乱码时,在标签之间添加:

 <meta http-equiv="Content-Type" content = "text/html;charset=utf-8" />

这样可以将字符集编码改为UTF-8
补充:字符集编码还有utf-8、GB2312、gbk等编码

3.文字和段落标签

标题标签<h1></h1>~<h6></h6>

段落标签<p></p> align对齐属性值;属性值如下:
left:左对齐内容
right:右对齐内容
center:居中对齐内容
justify:对行进行伸展,这样每行都可以有相等的长度

换行标签:<br/>

水平线:<hr/> 属性如下:
width:设置水平线宽度,可以像素或百分比
color:设置水平线颜色
align:设置水平线居中对齐
noshade:设置水平线无阴影

文字斜体:<i></i><em></em>

加粗:<b></b><strong></strong>

下标:<sub> 上标:<sup>

插入内容:<ins> 删除内容:<del>

特殊符号:

属性显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&reg;®已注册
&copy;©版权
&trade;商标
&nbsp;Space不断行的空白

列表标签
有序列表:(可以用type属性值设置有序的格式)
type的属性值有 “1” “a” “A” “i” “I”

<ol>
	<li>列表项</li>
	<li>列表项</li>
	.....
</ol>

定义列表:

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

图像标签

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

img属性:
在这里插入图片描述
超链接标签

<a href="" name="锚名1">内容</a>

属性:
在这里插入图片描述

4.HTML表格

<table> 表格
<tr>
<td> 单元格
表格划分三部分:表头、主体、脚注
thead : 表格的头(放表格的表头)
tbody : 表格的主体 (放数据本体)
tfoot : 表格的脚 (放表格的脚注)

<table>
	
	<caption>...</caption>  <!--表格标题,居中加粗-->
	<thead>
	<tr>
		<!--th 表格头,内容居中,加粗显示-->
		<th>...</th>
		<td></td>
		.....
	</tr>
	</thead>
	<tbody>
	<tr>
		<td></td>
		.....
	</tr>
	</tbody> 
	<tfoot>
		<tr>
			<td>脚注</td>
		</tr>
	</tfoot>
</table>

table 表格的属性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
tr标签属性

属性描述
alignleft center right justify char行内容的水平对齐
valigntop middle bottom baseline行内容的垂直对齐
bgcolorrgb(x,x,x) #xxxxxx colorname行的背景颜色

td 和 th 标签属性

属性描述
alignleft center right justify char行内容的水平对齐
valigntop middle bottom baseline行内容的垂直对齐
bgcolorrgb(x,x,x) #xxxxxx colorname行的背景颜色
widthxx% xxpixels单元格的宽度
heightxx% xxpixels单元格的高度

跨列属性colspan

<table>
<tr>
	<td colspan = "2">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</table>

例子1
跨行属性rowspan

<table>
<tr>
	<td rowspan = "2">...</td>
	<td>...</td>
</tr>
<tr>
	<td>...</td>
	<td>...</td>
	<td>...</td>
</tr>
</table>

在这里插入图片描述

5.HTML表单

表单的标签:<form></form>

标签描述
<input>表单输入标签
<select>表单和列表标签
<option>表单和列表项目标签
<textarea>文字域标签
<optgroup>菜单和列表项目分组标签

(1)input标签type属性值与描述

在这里插入图片描述

(2)select标签的属性

在这里插入图片描述

(3)option 标签属性

在这里插入图片描述

(4)分组下拉菜单和列表标签 ----optgroup语法

<select name = "">
	<optgroup label = "组1">
	<option value = "...">选项</option>
	<option value = "...">选项</option>
	....
	</optgroup>
		<optgroup label = "组1">
	<option value = "...">选项</option>
	<option value = "...">选项</option>
	....
	</optgroup>
</select>

(5)多行文本域 textarea

语法:

<textarea name = "..." rows = "..."  cols = "...">
	内容...
</textarea>

在这里插入图片描述

(6)Form标签属性

在这里插入图片描述

6.行内元素和块级元素

块级元素(占据一行,换行): div , p , form , ul , ui , ol , dl , address ,fieldset , hr , menu ,table …
行内元素(在一行,不换行):span ,strong , em , br , img ,input , label , select ,textarea ,cite
行内元素和块级元素的区别
(1)从显示效果来看

  • 块级元素会独占一行,其宽度自动填满其父元素
  • 行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度 随元素的内容而变化
    (2)块级元素可以设置width 、height 属性,行内元素设置 width , height 无效
    (3) 块级元素可以设置margin和padding 行内元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果**(行内元素的margin和padding水平方向有效,竖直方向无效)**

7.搭建网页的HTML结构

div标签和span标签

  • div标签

是一个区块容器标记,<div></div>之间是一个容器,可以包含段落、表格、图片等各种HTML元素

  • span标签

没有实际意义,为了应用样式

8.标签嵌套规则

  • 块级元素可包含行内元素和某些块级元素
  • 行内元素不能包含块元素,只能包含其他行内元素
  • 块级元素不能放在<p>标签内
  • 特殊块级元素只能包含行内元素,不能在包含块级元素。如:h1、h2、h3、h4、h5、h6、p、dt
  • 块级元素与块元素并列,行内元素和行内元素并列
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值