HTML相关知识点

最新推荐文章于 2024-07-25 11:26:35 发布

爱吃肉的小老鼠

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量97

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/lls_663/article/details/118468213

版权

HTML

前端的组成:html(内容)+css(排版和样式)+JavaScript(网页特效和表单验证)
前端编译(解析)器:浏览器(每个浏览器内核不同,所以有兼容性问题)
前端开发工具:记事本,Dreamweaver,HBuilder,WebStorm,eclipse,myeclipse,idea.
$\textcolor{red}{html:超文本标记语言.后缀名:.html 或 .htm html由标签组成的语言,且它的标签全部已经定义好,我们不可以自定义.}$
$\textcolor{red}{xhtml规范:}$
- $\textcolor{red}{每个xhtml页面必须有根标签<html></html>}$
- $\textcolor{red}{xhtml不区分大小写,但是提倡标签名和属性名小写.}$
- $\textcolor{red}{xhtml必须正确嵌套.eg:<标签名1><标签名2></标签名2></标签名1>}$
- $\textcolor{red}{xhtml元素必须被关闭。}$
- $\textcolor{red}{xhmtl元素标签的属性值必须用引号.}$
- $\textcolor{red}{标签名不能自定义,已经规定了每个标签的含义}$
$\textcolor{red}{xhtml组成:文档声明+html的基本结构组成}$

xhtml的三种文档声明:

严格型文档声明:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡型文档声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

框架型文档声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

$\textcolor{red}{html基本结构:}$
```
<html>
		<head>
		</head>
		<body>
		</body>
	</html>
```
html中头部常用标签:
- $\textcolor{red}{页面标题标签:}$
```
<title>标题内容</title>
```
- $\textcolor{red}{页面内容类型和编码方式}$
```
<meta http-equiv="contentType" content="text/html;charset=gb2312"/>
```
- 搜索关键字
```
<meta name="keyword" content="关键字"/>
```
- 网站描述
```
<meta name="description" content="描述内容"/>
```
- $\textcolor{red}{几秒跳转到网页}$
```
<meta http-equiv="refresh" content="时间;url=页面网址"/>
```
$\textcolor{red}{html中body常用标签:}$
1. 块级标签:独占一行.
2. 内容标题标签:h1~h6
3. 段落标签:
4. 水平线标签:
5. 列表
  - 有序列表
```
<ol type="I">
	<li>王者荣耀</li>
	<li>英雄联盟</li>
	<li>超级玛丽</li>
	<li>消消乐</li>
</ol>
```
  - $\textcolor{red}{无序列表}$
```
<ul type="square">
	<li>肠粉</li>
	<li>油条豆浆</li>
	<li>蒸米粉</li>
</ul>
```
  - $\textcolor{red}{自定义列表}$
```
<dl>
	<dt>java</dt>
	<dd>java是一种强类型的语言</dd>
	<dd>java是一种高级语言</dd>
	<dd>java是一种面向对象的跨平台语言</dd>
</dl>
```
$\textcolor{red}{表格标签:跨行rowspan="行数" colspan="列数"}$
```
<table border="1px" width="300px" height="400px">
		
		<tr>
			
			<td>姓名</td>
			<td>年龄</td>
			<td>专业</td>
		</tr>
		<tr>
			
			<td colspan="2">张三</td>
			
			<td>软件专业</td>
		</tr>
		<tr>
			
			<td rowspan="2">李四</td>
			<td>24</td>
			<td>软件专业</td>
		</tr>
		<tr>
			
				
			<td>24</td>
			<td>软件专业</td>
		</tr>
</table>
```
- (了解)功能性表格
```
<table border="1px" width="400px" height="500px">
		
		<caption>年终水电报表</caption>
			
		
		<thead>
			
			<tr>
				
				<th>宿舍号</th>
				<th>水费</th>
				<th>电费</th>
			</tr>
		</thead>
			
		
		<tbody>
			
			<tr>
				
				<td>101</td>
				<td>100</td>
				<td>500</td>
			</tr>
			
			<tr>
				
				<td>102</td>
				<td>200</td>
				<td>600</td>
			</tr>
			
			<tr>
				
				<td>103</td>
				<td>100</td>
				<td>400</td>
			</tr>
		</tbody>
		
		
		<tfoot>
			
			<tr>
				
				<th>总计</th>
				<th>400</th>
				<th>1500</th>
			</tr>
		</tfoot>
</table>
```
$\textcolor{red}{行级标签(内联标签):内容有多大占多大位置.}$
- 换行:
- 图片标签:<img src=“相对地址” title="鼠标悬念文字"alt=“图片加载失败提示文字”/>
  
  $\textcolor{red}{块级元素和行级元素的区别：}$
  - 块级元素独占一行
  - 块级元素可以有宽高

框架集:

将整个页面划分多个模板,每个模板引入一个页面.页面要么不用框架集,要么全用框架集.
优点:方便页面布局,及页面利用.
缺点:灵活性比较差,加载速度慢.
注意:框架集与body不共存;

<html>
	<head>
		<title>框架集的使用</title>
		<meta http-equiv="contentType" content="text/html;charset=gb2312"/>
	</head>
	<!--框架集-->
	<frameset rows="20%,60%,*">
		<!--第一部分-->
		<frame src=""/>
		<!--第二部分-->
		<frameset cols="20%,60%,*">
			<!--左边部分-->
			<frame src=""/>
			<!--中边部分-->
			<frame src=""/>
			<!--右边部分-->
			<frame src=""/>
		</frameset>
		<!--第三部分-->
		<frame src=""/>
	</frameset>
</html>

$\textcolor{red}{内联框架:}$

内联框架:在页面中直接引入另一个页面作为当前页面的一部分.

优点:灵活性好,实现页面利用.
```
<iframe src="2.1超链接的使用.html"></iframe>
```

特殊符号

&lt; 小于号          
&gt; 大于号       
&amp; 与字符        
&quot; 引号         
&reg; 己注册        
&copy; 版权        
&trade; 商标        
&nbsp; 空格

爱吃肉的小老鼠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML相关知识点

HTML前端的组成:html(内容)+css(排版和样式)+JavaScript(网页特效和表单验证)前端编译(解析)器:浏览器(每个浏览器内核不同,所以有兼容性问题)前端开发工具:记事本,Dreamweaver,HBuilder,WebStorm,eclipse,myeclipse,idea.html:超文本标记语言.后缀名:.html或.htmhtml由标签组成的语言,且它的标签全部已经定义好,我们不可以自定义.\textcolor{red}{html:超文本标记语言.后缀名:.
复制链接

扫一扫