HTML的基础标签

只讲基础标签,不细将标签属性

属性 另外讲
HTML标签按结束方式,可以分为:
1,围堵标签(有开始标签,就一定要结束标签)
2,自闭合标签(有开始标签,在标签上写一个“/”,该标签自动结束)

PS:HTML语法,属于一种弱语法,语法不严谨,如果自闭合标签没有加上“/”,会自己补上。

HTML标签分为两大类:

一 :块级标签(所有的块级标签都会自动换行)

块级标签又可以分为两种小类型
1:普通块级标签(一般用于包含文本)
p标签:段落标签
h1—h6标签:标题标签 h1最大, h6最小

<p>
p是段落标签
</p>
<h1>h1标题<h1>
<h2>h2标题<h2>
<h3>h3标题<h3>
<h4>h4标题<h4>
<h5>h5标题<h5>
<h6>h6标题<h6>

2.容器块级标签 (可以包含文本也可以包含其他标签)
1,ul (无序列表)
ps: 列表的浮动(让列表变成横向排列):float:left PS左浮动和右浮动的列表顺序需要调整
ul:表示当前是一个无序列表
li:表示是一个列表

<ul>
			<li>小米手机</li>
			<li>华为手机</li>
			<li>苹果手机</li>
		</ul>

效果如图 :
在这里插入图片描述

2,ol (有序列表)

<ol>
			<li>小米手机</li>
			<li>华为手机</li>
			<li>苹果手机</li>
		</ol>

效果如图:
在这里插入图片描述

3,dl (定义列表)

<dl>
		<dt><img src="img/imap.jpg" ></dt><!--这个里面放的是图片--->
		<dd>震惊!某女孩竟然。。。。<dd>
		</dl>

效果如图:
在这里插入图片描述

4,table (表单)
table中包含tr tr中包含th或者td

<table border="1"><!--border是边框  1为一个像素  为0则不显示边框-->
		<tr>
		<th>1,1</th>
		<th>1,2</th>
		</tr>
		<tr>
		<td>2,1</td>
		<td>2,2</td>
		</tr>
		</table>>

th是表头 表头中的内容会加粗并居中
td是单元格
此处写的是两行两列的表单
效果如图:

1,11,2
2,12,2

隐藏横向分隔线的表格,即rules=cols
隐藏纵向分隔线的表格,即rules=rows
隐藏所有内部分隔线的表格,即rules=none

表格合并

PS:合并表格的基本原则:合并表格以后,每一行的总列数一定要相等

表格合并的方式有:
跨行合并: rowspan=“几行”

<table border="1">
		<tr>
			<td rowspan="2">1,1</td>
			<td>1,2</td>
		</tr>
		<tr>
			<!-- <td>2,1</td> -->
			<td>2,2</td>
		</tr>
		</table>
1,11,2
2,2

跨列合并: colspan=“几列”

<table border="1">
		<tr>
			<td colspan="2">1,1</td>
			<!-- <td>1,2</td> -->
		</tr>
		<tr>
			<td>2,1</td>
			<td>2,2</td>
		</tr>
		</table>
1,1
2,12,2

5,form (表单)
表单中的控件太多 另作笔记

表单中,可以包含一组输入控件通过这些控件,可以接收用户输入的数据
<input type="控件的类型"  name="控件的名称" id="">       ps:name可以重名 id不可以重名 id可以写也可以不写

<from action="把数据提交到什么地方" method="提交方式">
</from>  PS:表单中包含的所有的输入控件,都是行级标签,都不会换行显示  

二:行级标签(所以的行级标签不会自动换行,会在同一行显示)

在html中用于修饰文本的标签

         1.迪丽热巴也太好看了
		<br><br> <!--br是强制换行标签 为了方便看效果 我才这样写--->
		<b>2.迪丽热巴也太好看了</b> <!--b 标签 字体加粗--->
		<br><br>
		<i>3.迪丽热巴也太好看了</i> <!---i 标签 字体倾斜--->
		<br><br>
		<font size="5px" color="red">4.迪丽热巴也太好看了</font>
		<!---font用于规定文本字体颜色等 size是字体大写  color是字体颜色--->

效果如图:

在这里插入图片描述

超链接标签  a
用法一  链接到指定网址
<a href="网址" target="-blank">名称</a>
href:指定链接的地址
target:指定,在哪一个位置显示链接后页面
        -blank:表示弹出一个空白页面,在新页面中显示内容
        -self:(默认值)表示把当前页面替换成链接后的页面


用法二   链接到项目中的某一个页面
	
用法三    锚链接
超链接实现锚链接,跳转到页面的某一个区域
实现步骤
1.在每一个区域中,指定一个锚标记
<A>id="one"</A>
2.通过超链接跳转到指定位置
<a href="#名称">回到顶部</a>

转义字符(代表一些特殊符号)

&nbsp;  ---------------代表一个空格
&yen;  -----------------人民币符号¥
&copy;  ----------------版权符号©
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值