Web前端开发,自学笔记整理
HTML基础
1.基础环境
- Google Chrome
- HBuilder
- Photoshop
2.HTML基础架构
<!--HTML注释,快捷方式 command+/ (Windows:control+/)-->
<!--document type html-->
<!DOCTYPE html>
<!--网页正式内容-->
<html>
<!--头部-->
<head>
<!--编码类型-->
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<!--身体-->
<body>
Hello world!
</body>
</html>
3.字符集(编码类型)
- UTF-8: 国际通用字库
- GB2312(GBK): 中国字库
- UTF-8(一个汉字3个字节)
- GB2312(一个汉字2个字节)
- 计算机不能之间存储汉字,都是存储编码
4.常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<!--1.标题标签-->
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<!--2.段落标签-->
<h2>春晓</h2>
<p>春眠不觉晓,</p>
<p>处处闻啼鸟。</p>
<p>夜来风雨声,</p>
<p>花落知多少。</p>
<!--3.加粗标签-->
<p>对比文字</p>
<strong>测试</strong>
<b>测试</b>
<!--4.倾斜标签-->
<i>谷歌</i>
<em>www.google.com</em>
<!--5.下划线标签-->
<p> God help <u>those</u> who help <u>themselves</u>. </p>
<!--6.上标注-->
<p>
2<sup>3</sup>=8
</p>
<!--7.下标注-->
<p>
H<sub>2</sub>O 水
</p>
<!--8.无序列表-->
<ul>
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ul>
<!--9.有序列表 属性名=属性值
type="a" //序号类型 1(默认),a,A,i,I
start="3"//序号起始位置-->
<ol>
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<ol type="a">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<ol type="a" start="3">
<li>News1</li>
<li>News2</li>
<li>News3</li>
</ol>
<!--10.自定义列表-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
<!--11.图片
src="url"网络链接
或src="path"本地路径
-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524137188339&di=9bfcd71b9d04cd4db12359ce28a1aaa8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F014263554468cc0000019ae9262bb8.jpg%402o.jpg" />
<img src="dishu1.png" />
<br />
<!--12.超链接
href="url"网络链接
或href="path"本地路径
target="打开方式" //_self当前窗口(默认),_blank新建窗口
-->
<a href="https:www.baidu.com">百度一下</a>
<br />
<a href="01-test.html" target="_blank">HTML基础架构</a>
<br />
<!--特殊字符-->
空格 <br />强制换行
<p>你 可以不聪明,<br />但不可以不努力。</p>
<hr /> 分割线
<p>
© 版权标签
</p>
<p>
<前端开发> <=左尖括号;右尖括号=>
</p>
</body>
</html>
5.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
3行4列: 每行4个单元格(有三行)
tr: 行
td: 单元格
width: 表格宽度(像素px,可以省略不写)
height: 表格高度
border: 表格边框
cellspacing: 单元格间距
cellpadding: 调整内容的位置
align: 水平对齐方式(left,center,right)
加到table里表示整个表格水平方向位置
加到tr里表示整一行的对齐方式
加到td里表示对应单元格的对齐方式
valign: 垂直方向(只能用于tr/td,top/middle/bottom)
bordercolor: 边框颜色
colspan: 合并行单元格
rowspan: 合并列单元格
-->
<table width="300" height="200" border="1" cellspacing="0" cellpadding="10" align="center" bordercolor="blue">
<!--第一行-->
<tr align="center">
<td>1</td>
<td colspan="2" align="center">2</td> <!--合并行单元格 colspan="" 合并的单元格数量-->
<!--<td>3</td>-->
<td rowspan="2">4</td> <!--合并列单元格 rowspan="" 合并的单元格数量-->
</tr>
<!--第二行-->
<tr valign="bottom">
<td align="center">1</td>
<td>2</td>
<td>3</td>
<!--<td>4</td>-->
</tr>
<!--第三行-->
<tr>
<td valign="bottom" colspan="3">1</td>
<!--<td>2</td>
<td>3</td>-->
<td>4</td>
</tr>
</table>
</body>
</html>
6.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--
表单域:form
name: 表单域名称
method: 请求方式 get/post
action: 提交URL
-->
<form name="test" method="get" action="https:www.baidu.com">
<!--
1.文本域
type: 类型
placeholder: 提示文本
value: 输入框中的初始内容
-->
<p>
账号: <input type="text" placeholder="手机号/QQ号" value="123456" />
</p>
<!--
2.密码输入框
type: type="password"
-->
<p>
密码: <input type="password" placeholder="6位密码" />
</p>
<!--
3.单选框
type="radio"
同一组中的只能选择一个
name: 控制哪一组
checked: 默认选中的
-->
<p>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>中性
</p>
<!--
4.多选框
type="checkbox"
name: 控制哪一组
checked: 默认选中的
-->
<p>
<input type="checkbox" name="like" />睡觉
<input type="checkbox" name="like" checked="checked" />吃饭
<input type="checkbox" name="like" />打豆豆
</p>
<!--
5.下拉菜单
-->
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<!--
6.按钮
value: 按钮内容
-->
<p>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
</p>
<!--
7.提交按钮
提交即提交到表单域action中填写的地址
-->
<p>
<input type="submit" value="注册" />
</p>
<!--
8.重置按钮
重置该按钮对应的表单域中
-->
<p>
<input type="reset" value="重置" />
</p>
</form>
</body>
</html>