-
什么是HTML?
指超文本标记语言,用来描述网页的一种语言 -
Web标准?
结构——整理分类(html)
表现——版式、颜色、大小等外观(CSS)
行为——交互(javascript) -
标签
语法规范
1.关键词由<>包围,成对
2.单标签
标签关系
1.包含 head,tilte
2.并列 head,body -
标签
<!--结构标签-->
<html>
<head>
<title>网页标题</title>
</head>
<body>
你我之间,黑马洗练
<h1>内容标题</h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
</body>
</html>
<!--声明标签-->
<!DOCTYPE html>
<html lang="en">//en英文 zh-CN中文
<head>
<meta charset="UTF-8">//字符集,存储文字 万国码 (乱码)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!--常用标签-->
<h1></h1> <h2></h2> <h3></h3> ……//标题
<p> ……</p> //段落
<br> <br/> //加空行 强制换行
文本格式化标签
加粗 <strong> </strong>
倾斜 <em> </em> 或<i> </i>
下划线 <u> </u> 或 <ins> </ins>
删除划线<del> </del> 或<s> </s>
特殊字符
空格
小于号 <
大于号>
&号 &
盒子用来装内容,布局,无语义
<div> </div> 大盒子,独占一行
<span> </span> 小盒子,一行可放多个<span>
图像标签
<img src="路径"/> //图片预先放到html的同一个文件
alt
<img src="路径" alt="文字替换"/>//替换文本,图像不能显示的时候,用文字替换
title
<img src="路径" title="我是pink老师思密达"/> //鼠标放到文字上,提示的标签
width
<img src="路径" width="500"/> //图像的宽度
height
<img src="路径" height="500"/> //图像的高度
border
<img src="路径" border="50"/> //边框的粗细
超链接
访问外部、内部链接都可以
<a href="跳转目标" target="-blank或-self">文本/图像</a>
<a href="thefirsthtml.html" target="-blank">文本/图像</a>
target 打开窗口方式 默认是_self 当前窗口打开 _blank 新窗口打开
空链接
<a href="#">空链接</a> 或 <a>空链接</a>
下载文件
下载链接:文件 .exe 或是 zip等压缩包形式
<a href="1.zip">下载</a>
网页元素链接
图片、文本、音频、表格、视频上都可以添加超链接
<a href="1.zip"> <img src="路径"/> </a>
锚点链接
点一下,快速定位跳到对应位置,如
<a href="#个人生活"> 个人生活 </a>
<h3 id="个人生活">个人生活</h3>
- 表格 Table
<table> 定义表格
<tr> 行
<td> 每一行里的单元格
普通单元格
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>58</td></tr>
</table>
表头单元格
td——>th 加粗、居中、突出
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>58</td></tr>
</table>
表格相关属性
要写到table里面去
align
<table align = "center/left/right"> 对齐
border
<table border="1"> 边框
cellspacing
<table cellspacing="0"> 单元格和单元格中间的距离
cellpadding
<table cellpadding="20"> 表格边沿与内容之间的空白
width/height
<table width/height="500"> 表格变宽了/变高了
表格分两大区域
<thead> </thead>
<tbody> </tbody>
<table align="center" width="500" height="20" border="1" cellspacing="0">
<thead>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
</thead>
<tbody>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>张学友</td> <td>男</td> <td>57</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>58</td></tr>
</tbody>
</table>
合并单元格
跨行合并:rowspan="个数"
跨列合并:colspan="个数"
<td rowspan="2"></td>
<td colspan="2"></td>
- 列表
无序列表<ul>
有序列表<ol>
自定义列表<dl>
无序列表(重点)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>任何元素</li>
……
</ul>
例:
<h4>喜欢的食物?</h4>
<ul>
<li><a href="https://baike.baidu.com/item/%E8%8D%89%E8%8E%93/32702">草莓 </a></li>
<li>西瓜</li>
<li>冰蛋糕</li>
<li>葡萄</li>
</ul>
有序列表
<h4>喜欢听的歌排名?</h4>
<ol>
<li><a href="https://music.163.com/#/song?id=1299889486" target="_blank">戒不掉</a></li>
<li>是你</li>
<li>大地 </li>
<li>海阔天空</li>
……
<ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
- 表单
表单域、表单控件、提示信息
<form action="地址" method="提交方式get/post" name="表单域名称">
<input type="类型">
text文本
radio单选
checkbox多选框
password密码形式输入
submit 提交
reset 重置
button 不提交,只是做某件事,后期结合js使用
name
value 文本框显示 、后台用
checked 默认选上√ checked="checked"
maxlength 规定最大长度
file 上传文件
<form action="地址" method="POST" name="name1">
用户名:<input type="text" value="请输入用户名"> <br>
密码:<input type="password"> <br>
<!-- name是表单元素,性别单选按钮必须有相同的name,才可以实现单选 -->
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br>
<!-- name是表单元素,爱好多选按钮必须有相同的name,才知道选了哪几个 -->
爱好:吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value=" 睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码">
上传头像:<input type="file" >
</form>
- label 标签
1.锁定一个表单元素,“增大点击面积”,增加用户体验。
2.label里面的for属性,要与id的属性一样。
3.在,表示默认选上
<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex"/>
- select 下拉标签
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>……</option>
</select>
例:
<form>
籍贯:
<select>
<option>山东</option>
<option>广东</option>
<option>江西</option>
</select>
</form>
- textarea 文本域
多行的文本输入区域,如:网站介绍/留言
语法:
<textarea rows="3" cols="20"
文本内容
</textarea>