html和css基础

最新推荐文章于 2024-07-12 20:49:16 发布

水星哥@

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量263

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/xiaosashuixing/article/details/106151590

版权

一、 HTML语法介绍

1. 标签

标签也称为标记或元素，用于在网页中标记内容

语法：标签使用< >为标志，标签名不区分大小写(个人习惯为小写)
分类：
- 双标签：成对出现，包含开始标签和结束标签。例：
```
<html></html>
```
- 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：
```
<br>
<br/>
```
标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
```
 <meta charset="utf-8">
```
- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
```
 <img src="lily.jpg" width="200px" height="200px">
```

二、常用标签介绍

1. 基本结构解析(主体)

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
   <head>
       <!-- 设置网页标题，显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分，显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

2. body中常用标签

文本标签

标题标签：自带加粗效果，从h1到h6字体大小逐级递减

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签：

 <p>段落文本</p>

普通文本标签：

 <span>行分区标签，用于对特殊文本特殊处理</span>
 <b>加粗标签</b>
 <strong>强调标签，效果同b标签</strong>
 <label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
 <i>斜体标签</i>
 <u>删除线标签</u>

格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

 <br>

水平线标签，在页面中插入一条水平分割线

 <hr>

字符实体：
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：

 使用 &lt; 在页面中呈现 "<"
 使用 &gt; 在页面中呈现 ">"
 使用 &nbsp; 在页面中呈现一个空格
 使用 &copy; 在页面中呈现版权符号"©"
 使用 &yen; 在页面中呈现人民币符号"￥"

容器标签
常用于页面结构划分，结合CSS实现网页布局

   <div id="top">页面顶部区域</div>
   <div id="main">页面主体区域</div>
   <div id="bottom">页面底部区域</div>

图片与超链接标签
- 图片标签：用于在网页中插入一张图片。
  1. 属性 src 用于给出图片的URL，必填。
  2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
  3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
  4. 属性 alt 用于设置图片加载失败后的提示文本
  语法：
```
<img src="" width="" height="" title="" alt="">
```
- 超链接标签：用户可以点击超链接实现跳转至其他页面
  1. 属性 href 用于设置目标文件的URL，必填。
  2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
```
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
```

3. 常用结构标签

列表标签

无序列表（ordered list）
默认使用阿拉伯数字标识每条数据

<ol>
	<li>list item 列表项</li> 
	<li>list item 列表项</li>
	<li>list item 列表项</li>
</ol>

有序列表（unordered list）
默认使用实心圆点标识列表项

 <ul>
  	<li>list item 列表项</li> 
  	<li>list item 列表项</li>
  	<li>list item 列表项</li>
  </ul>

列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单

<ol>
	<li>
		西游记
		<ul>
			<li>孙悟空</li>
			<li>孙悟空</li>
			<li>孙悟空</li>
		</ul>
	</li>
</ol>

表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

 <!-- 创建表格标签 -->
<table>
	 <!-- 创建行标签 -->
	<tr>
		<!-- 行中创建单元格以显示数据 -->
		<td>姓名</td>
		<td>年龄</td>
		<td>班级</td>
	</tr>
	<tr>
		<td>小白</td>
		<td>18</td>
		<td>001</td>
	</tr>
	<tr>
		<td>迪丽热巴</td>
		<td>20</td>
		<td>002</td>
	</tr>
</table>

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后仍然保证表格结构完整

<table border="1px" width="300px" height="300px" align="center">
	<tr>
		<td colspan="3">星期1</td>
		<!--单元格合并之后删除多余的单元格-->
		<td>星期1</td>
		<td>星期1</td>
	</tr>
	<tr>
		<td rowspan="2">星期1</td>
		<td>星期1</td>
		<td>星期1</td>
		<td>星期1</td>
		<td>星期1</td>
	</tr>
	<tr>
		<!--跨行合并,删除多余的单元格-->
		<td>星期1</td>
		<td>星期1</td>
		<td>星期1</td>
		<td>星期1</td>
	</tr>
</table>

行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中

<table border="1px" width="300px" height="300px">
	<!-- 表头-->
	<thead>
		<tr>
			<!-- th与td标签用法一致，表示单元格，自带加粗和居中效果-->
			<th>姓名</th>
			<th>年龄</th>
			<th>班级</th>
		</tr>
	</thead>
	<!-- 表尾-->
	<tfoot>
		<tr>
			<td colspan="3">小计</td>
		</tr>
	</tfoot>
	<!-- 表主体-->
	<tbody>
		<tr>
			<td>小红</td>
			<td>18</td>
			<td>001</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>18</td>
			<td>001</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>18</td>
			<td>001</td>
		</tr>
	</tbody>
</table>

三、CSS中的span和div

div就相当于容器可以放东西

span属于文本级的标签

div
- div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
- div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span
- span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
- span里面是放置小元素的，div里面放置大东西的：

<div>
    <h3>四大名著</h3>
    <ul>
        <li>西游记</li>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
</div>

<p>
    111111111111111
    <span>
        <a href='http://www.baidu.com'>百度</a>
        <a href='http://www.taobao.com'>淘宝</a
    
    </span>
    
</p>

水星哥@

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html和css基础

一、 HTML语法介绍1. 标签标签也称为标记或元素，用于在网页中标记内容语法：标签使用< >为标志，标签名不区分大小写(个人习惯为小写)分类：双标签：成对出现，包含开始标签和结束标签。例：<html></html>单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：<br><br/>标签属性：标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。
复制链接

扫一扫