9

HTML基础知识

 3 years ago
source link: https://blog.csdn.net/qq_42076902/article/details/112631623
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

1.HTML基本结构

众所周知，HTML（Hyper Text Markup Language）称为超文本标记语言，是一种标记语言。那么快速入门HTML也是很非常容易，如下：

<html>  大标签
	<head> 头标签

		<title></title>  标题
	</head>
	<body> 内容标签

	</body>
</html>

2.大量标签

1.段落标签

<p> </p>

2.换行标签(自闭和)

	<br/>

3.标题标签
从大到小变化：

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

4.表格
无序列表ul+列表项li
有序列表ol+列表项li
5.定义列表
dl 定义列表
dt 定义的标题
dd 定义的解释项
6.文字排版(括号里面为英文解释)
文本加粗b( bold)/ strong（强调）
文本斜体i(incline)/em(强调)(emphasize)
下划线u(underline)
删除线del (delete)
横线hr
上标sup
下标sub
big 大（文字）
small小
7.行与块元素
块元素
1.总是新起一行
2.可以包括块，行，文本
3.包括div p h1-h6 dl dt dd ol ul li 等
行内元素
1.和其他行内元素在一起
2.可以包含其他行内元素和文本
3.span i em b strong u del sub sup big small img a input button textarea等
8.规则
1.行内元素只能嵌套行内元素和文本
2.块元素可以嵌套 文本 块 行内
3.p,h元素通常只嵌套文本和行内
4.ol,ul最好直接子集是li
5.以上规则皆可以打破
9.特殊符号

	  空格
	<左尖括号 <
	>右尖括号 >
	©版权 ©
	& &

10.img：图片

<img src="./1.jpg">

代表图片1.jpg的地址
./代表当前html所在的目录
图片标签的属性 ：
align:对齐
alt:替换图片文字
width:宽
height:高
11.a标签：链接
>href ：链接地址
包括相对路径：
1相对于当前html文件的位置
2 ./开头 当前目录 （可以省略）
3 …/开头(两个点) 上一级目录
4 文件夹或者文件名/开头 （省略一个./）
和绝对路径：HTTP开头；/开头 网站的根域名
当链接的地址不是网页的时候，就是下载该文件
>target目标：
有两个属性： _self当前标签 _blank新标签打开
12.表格：table
属性有以下：
border ：边框
width：宽度
height ：高度
align对齐：left right center
valign 垂直对齐：top center bottom
cellspacing：单元格间距
cellpadding：文字到单元格（边框）的距离
bgcolor：背景颜色
rowspan：行合并
colspan：列合并
在表格标签里面添加下面属性会更美观：
（合并边框模型）

<style="border-collapse: collapse;">

子元素：tr行，td列和th标题列，其中：
rowspan行合并
colspan列合并

一个完整的表格：


<table>
	<thead>
		<th>
		<td></td>
		</th>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
		</tr>
	</tfoot>
</table>

13.iframe标签
定义：在网页中引入其他网页
src 引入地址
width宽
height高
scrolling 是否滚动 yes/no
frameborder=“0” 框架边框为0
14.不可见标签

	<meta charset="utf-8"/>
	让网页不乱码(指定元素信息,字符集=“万国编码”)
	<meta name="description" content="网页的描述"/>
	<meta name="keywords" content="网页关键字"/>
	style样式
		.red{color:red;font-size:48px;}

15.表单：form

<form action="" method="post"></form>

method：post(更安全)，get(提交页面时会看到提交的信息)

<input type="text"  value="小明" maxlength="5" />

代表输入类型为文本，提示名为小明，文本最大长度为5

<input type="password"  />

代表输入类型为密码（文本不可见）

<label>
		<input type="checkbox" name="favorite"  />
		唱歌</label><label>
		<input type="checkbox" name="favorite"  />
		跳舞</label>
		<input type="checkbox" name="favorite"  />
		游泳
		<input type="checkbox" name="favorite"  />
		看书
		<input type="checkbox" checked="checked" name="favorite"  />
		玩手机

代表复选框类型，其中唱歌和跳舞不管点击图片还是复选框，都会框选中，游泳和看书需点击复选框才能选中，玩手机默认被框选

性别:
		<label>
		<input type="radio" checked="checked" name="sex"  />
		男</label><label>
		<input type="radio" name="sex"  />
		女</label>

代表单选框，只能选其一，默认选择男

<input type="file" name="file"  />

代表点击上传文件

<select size="2" >
			<option  selected  >博士</option>
			<option >硕士</option>
			<option >本科</option>
			<option >大专</option>
			<option >高中</option>
			<option >中专</option>
			<option >初中</option>
			<option >小学</option>
		</select>

代表下拉框，其中size设置一次显示两个，如果加上multiple，则会以滚动条形式选择

<textarea rows="10" cols="30" >提示文本</textarea>

代表一个多行文本，rows设置行高，cols设置列宽

<input type="submit"  value="提交" />

提交表单按钮

<input type="reset" name="" id="" value="重置" />

重置所有已填的表单为默认属性

<button type="button">同意</button>

代表一个普通按钮

<input type="image" src="images/提交注册.jpg" />

代表图片按钮

3.各种属性

1.定义:修饰html标签(元素)
2.组成:属性名=“属性值”

 <hr width="200" />

3.title属性:鼠标的提示

<p title="鼠标的提示">

4.style属性:元素的外观

<p style="color:red;font-size:48px;">

5.class属性:元素的类名
规则：可以有多个，用空格隔开，可以重复

<p class="red big">

6.id属性：类似身份证
规则元素的唯一识别，有且只有一个

	<p id="gzy">

7.锚点：实现页面内容切换
定义

	<a id="ch1">

<a href="#ch1">
<a href="demo.html#ch1">
<a href="./demo.html#ch1">

8.frameset：框架集（一般很少用）
frame框架
name 框架的名称
src 文件地址
属性：

		cols 列：% 百分比 数字 像素 *代表剩余的宽
		rows 行：% 百分比 数字 像素 *代表剩余的高
		noresize=“true”不允许拖动框架
		frameborder=“0”框架的宽度

9.图片热点区域
作用:形成不规则的链接区域，在图片里边画形状，创建区域链接
小建议：使用dreamweaver绘制热点区域更方便

	<img usemap="#Map"><area shape="poly" coords="xxx" href="" target="">

总结此文花费大量时间，建议收藏本文，以便后事之需，此外博主这里还有xmind形式的总结，更方便查看了解，有需要可以私聊，如果本文有差错，欢迎一起讨论，谢谢。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK