HTML学习

HTML

4.30重新学习前端，笔记加记录。

服务器软件

安装Apache即可使电脑成为服务器（server）

浏览器作用

1.向服务器发起请求
2.缓存用户浏览过的数据
2.1查询浏览器缓存
地址栏输入chrome：//version ，找到个人资源路径
3.渲染数据

认识HTML

纯文本文件占用内存会更小，网络传输速度会更快
HTML即为纯文本文件，超文本标记语言

开发工具

sublime3

快捷键	含义
ctr+n	创建文件
shift+！=>tab	快速生成html骨架
标签名 =>tab	快速生成标签
标签名+*+数字	生成多个标签

vscode
webstorm

基本标签

1.h系列标签1~6：标题标签 ，容器级别，内可插入任意内容，不能相互嵌套
2.p标签（paragraph）段落标签<p></p>
3.img标签（image）单标签
<img src="o.jpg" width="200px" height="200px" />
：

属性	含义
src	路径
width	宽度
height	高度
title	选中显示提示文字
border	图片外层边框宽度
alt	无图时显示的文字

4.a标签 超链接 <a herf="www.baidu.com" title="鼠标选中显示悬浮文字">百度</a>
实现网页跳转或锚点
4.1锚点使用
设置锚点：用id属性设置
设置点击地址，herf地址为**#+目标id**
5.&nbsp 空格

相对路径、绝对路径

相对路径：
1.先找到此文件的文件夹，从此文件夹开始向下写路径
2.用../寻找上一级目录，再向下依次寻找目标文件

绝对路径：直接从盘开始依次写路径或直接使用网址

列表

1.无序列表unorder list
属性 list-style-type:circle/square/none

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

2.有序列表order list

<ol>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ol>

3.定义列表
用于解释某个名词

<dl>						//definition list 定义外层容器
	<dt></dt>			//definition term 表示列表主题或术语
	<dd></dd>		//definition description 表示术语的解释
</dl>

dd dt为容器级别标签，内可放任意内容(文字、标签)

布局标签

div标签（division区域、跨度、分割）
划分区域
span标签（小区域、小跨度）

<span></span>

表格

<table>
	<tbody>
		<tr>					//列
			<th></th>		//表头table head，第一行第一列
			<th></th>		//          第一行第二列
		</tr>
		<tr>					//
			<td></td>		//第二行第一列
			<td></td>		//第二行第二列
		</tr>
	</tbody>
</table>

表单

可以让用户输入文字单小控件
1.form标签

<form method="post" action="提交地址"></form>

2.input标签 表单元素 文本/密码输入框

<input type="text/password" name="名称" value=”输入默认值“/>
 

3.单选框/复选框
插入表单标签中使用

单选框一般成组出现，且互斥
设置单选按钮互斥方法：两个按钮添加相同的name属性，且属性值一样
4.按钮（type属性不同）
submit 登陆/提交按钮
reset 充值按钮
button 普通按钮
5.文本域

文本框textarea

<textarea rows="10">默认文字</textarea>

属性：
rows 表示行数，文字超出出现滚动条
cols 表示宽度
style 表示样式 有resize：nome 不能拖动

下拉菜单select、option

<select>
	<option>北京</option>
	<option>上海</option>
	<option>广州</option>
</select>

默认第一个选项，改变默认选项，添加属性selected=“selected”

字符实体

w3c字符实体链接学习手册

含义	字符实体
空格	&nbsp；
小于号	&lt；
大于号	&gt；
版本符号	&copy；