WEB基础：HTML_htmlmyzone代码-CSDN博客

本文链接：https://blog.csdn.net/qq_24732379/article/details/77512893

#WEB三要素

浏览器
服务器
HTTP协议

#XML和HTML

XML
可扩展(自定义)标记语言
标签、属性、嵌套关系均可扩展
用来存储或传输数据
HTML
超文本标记语言
标签、属性、嵌套关系是固定的(w3c)
某些版本的HTML就是以XML规范来定义的
理解:HTML就是标签固定的XML

#HTML标签

HTML版本申明

H5：<!doctype html>   //版本申明位于html文件第一行

head元素

申明元信息，样式表，包含的脚本等等。
常添加标签
<head><title>,<meta>,<link>,<style>,<script></head>
<meta charset="UTF-8">
<link rel="stylesheet" href="url">

文本元素

标题元素：<hn>:n属于[1,6]
段落元素：<p>这是一个段落</p>
列表元素：有序表，无序表
列表嵌套

<ol>
		<li>
			河北省
			<ul>
				<li>石家庄</li>
				<li>保定</li>
				<li>廊坊</li>
			</ul>
		</li>
		<li>
			山东省
			<ul>
				<li>济南</li>
				<li>青岛</li>
				<li>威海</li>
			</ul>
		</li>
	</ol>

块分区元素：<div>
行内元素：
<span>:内联元素，没有特定的含义，可用作文本容器
<i>:斜体<em>:着重文字：这两个不同浏览器不一定好使
<b>:加粗
<del>:带删除线
<u>:带下划线
<br>:换行
字符实体：如空格：&nbsp; 小于号：&lt;
HTML中多个空格，制表符，换行符会被压缩成单个空格。

#元素的默认显示方式
1.块：有宽高,垂直排列

h,p,ol,ul,div,table,form

2.行内：无宽高,左右排列

span,i,em,b,strong,u,del,a,label

3.行内块：有宽高,左右排列

img,input,select,textarea

CSS可以改变默认显示方式
在样式里添加display属性。
块: display:block;
行内: display:inline;
行内块: display:inline-block;
隐藏: display:none;
#图像与超链接
- 图像元素：

<img src="url"/> 常用属性：width,heigth;

超链接与锚
超链接
<a href="url" target="">文本</a>
连接到url。target:可以取_blank,_self表示是否新建一个页面打开超链接内容
锚是在当前页面定义一个标记，用于跳转
定义锚点：<a name="dot">锚点1</a>
链接锚点：<a href="#dot">链接到锚点1</a>

<a href="#">只写#，默认链接到顶部</a>

#表格元素

表格：结构化组织数据

1)基本用法
	<table border="1" cellspacing="0" width="200px">
		<tr>
			<td>一行第一个元素</td>
			<td>一行第二个元素</td>
		</tr>
	</table>
2)跨行跨列
	<table border="1" cellspacing="0" width="200px">
		<tr>
			<td colspan="2">唐三藏</td>
		</tr>
		<tr>
			<td>猪八戒</td>
			<td>沙和尚</td>
		</tr>
	</table>
	<table border="1" cellspacing="0" width="200px">
		<tr>
			<td rowspan="2">唐三藏</td>
			<td>孙悟空</td>
		</tr>
		<tr>
			<td>猪八戒</td>
		</tr>
	</table>		
3)行分组：<thead><tbody><tfoot>
	<table border="1" cellspacing="0" width="300px">
		<thead>
			<tr>
				<td>编号</td>
				<td>名称</td>
				<td>金额</td>
			</tr>
		</thead>
		<tbody style="color:blue;">
			<tr>
				<td>1</td>
				<td>鼠标</td>
				<td>50</td>
			</tr>
			<tr>
				<td>2</td>
				<td>键盘</td>
				<td>100</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">合计</td>
				<td>150</td>
			</tr>
		</tfoot>
	</table>
</body>

#表单元素:

用来声明表单的范围,只有此范围内填写的数据才能提交给服务器.
属性action:用来声明表单提交的目标.method,enctype
表单具有12大控件
##input元素

文本框
value:设置默认显示的值
maxlength:设置最大长度
readonly:设置只读

账号:<input type="text" value="tarena" maxlength="10" readonly/>

密码框:属性同上：密码:<input type="password"/>
单选框
name:组名,同一组单选才能彼此互斥.
checked:设置默认选中.
value

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

多选框
checked:设置默认选中.
name,value

	兴趣:
			<input type="checkbox" checked/>竞技
			<input type="checkbox" checked/>美食
			<input type="checkbox"/>旅游
			<input type="checkbox"/>社交

隐藏框：<input type="hidden" value="abc"/>
文件框：文件:<input type="file"/>
提交、重置、普通按钮

<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>

##其他元素

label标签

用来管理表单中的文字,它可以将文字与控件绑定,从而增加控件的点击范围,提高易用性.
id是元素的唯一标识,任何元素都可以有id

<input type="checkbox" id="c1"/>
<label for="c1">我已阅读并自愿遵守此协议!</label>

下拉选
selected:设置默认选中.
value:

	城市:
			<select>
				<option>请选择</option>
				<option>北京</option>
				<option>上海</option>
				<option selected>深圳</option>
				<option>广州</option>
				<option>南京</option>
			</select>

文本域
cols:设置宽度.
rows:设置高度.

简介:<textarea cols="30" rows="6"></textarea>