1. 概念
HTML就是静态网页
-
你在浏览器上看到的任何东西的都是网页
官方名称：超文本标记语言
-
超文本：可以定义图片，连接，表单，音乐
-
标记：标签
-
标签名定义在尖括号中，一般有开始有结束
-
每个标签代表浏览器中一个样式
<html> </html> <p> </p> <div> </div> <img> <input> -
2. 创建html
-
创建一个html格式文件
-
定义html标签
-
所有的页面标签都必须定义在html标签中
-
-
定义head标签
-
定义页面引入的静态资源
-
-
定义body标签
-
定义所有需要显示在页面中的样式
-
<html>
<head></head>
<body>
this is my first html
</body>
</html>3. 安装IDE
编写html，选择使用HBUILDER
下载地址：HBuilderX-高效极客技巧
4. 标签
1. 结构标签
-
html
-
head
-
title
-
meta
-
-
body
<!--
生成一个注释： ctrl+shift+/
-->
<!-- 定义当前html的版本为5-->
<!DOCTYPE html>
<!-- html标签:所有的页面标签都必须定义在html标签中，它就表示一个静态页面 -->
<html>
<!--
头标签
1. 定义元数据 定义html本身一些信息，有助于浏览器解析
2. 定义标题头
3. 引入和定义的css
4. 引入和定义的js
-->
<head>
<meta charset="utf-8">
<title>我的第一个html</title>
</head>
<!-- 定义显示在浏览器中的样式 -->
<body>
<h1>这是我们的第一个html</h1>
</body>
</html>2. 块级标签
块级标签： 能够自动换行
-
h1-6
-
p
-
hr
-
br
-
div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块级标签</title> </head> <body> <!-- h标签： 标题标签 h1- h6 越来越小 --> <h1>观沧海</h1> <h2>观沧海</h2> <h3>观沧海</h3> <h4>观沧海</h4> <h5>观沧海</h5> <h6>观沧海</h6> <!-- 没有h7标签，写了不起任何作用 --> <h7>观沧海</h7> <!-- hr: 横线 --> <hr/> <!-- p : 段落标签 --> <p>东临碣石，</p> <p>以观沧海。</p> <p>水何澹澹，</p> <p>山岛竦峙。</p> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- br: 换行的标签 --> 金樽清酒斗十千, <br> 玉盘珍羞直万钱。<br> 停杯投箸不能食, <br> 拔剑四顾心茫然。<br> 欲渡黄河冰塞川，<br> 将登太行雪满山。<br> <!-- div: 省市区 目的把标签内的标签看做是一个整体，可以统一的进行操作 --> <div style="color: red;"> <p>东临碣石，</p> <p>以观沧海。</p> <p>水何澹澹，</p> <p>山岛竦峙。</p> </div> </body> </html>
3.行内标签
行内标签： 这种标签不会自动换行
-
span
-
b
-
strong
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
行内标签：不会自动换行
spqn,b,strong
为字体添加样式
color 颜色
font-size 字体大小
-->
<p>东临碣石，</p>
<p>以观<span style="color: red; font-size: 20px;">沧海<span>。</p>
<p style="font-size:20px ;">水何澹澹，</p>
<p>山岛竦峙。</p>
<hr />
<b>当你</b><strong>觉得</strong><em>为时已晚</em>，恰恰是最早的时候。
</body>
</html>4. 图片标签
在html中可以使用<img> 标签展示图片
img
src：定义图片路径 width:图片宽度 height:图片高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
img：图片标签，可以展示一张图片
src: 定义的图片的路径
一提到路径，就要想到绝对路径和相对路径
绝对路径是以 / 开头的
相对路径不以 / 开头
width : 设置图片宽
height: 设置图片高
-->
<!--
当前页面是Demo05-图片标签.html 在html01文件夹下
那就从html01文件夹中开始找图片的路径
-->
<img src="img/dd.jpeg" width="300px">
<!-- 绝对路径，以 /项目名/路径/文件名 -->
<img src="/html01/img/dd.jpeg" width="300px">
</body>
</html>5. 列表标签
-
无序列表 ul
-
有序列表 ol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
列表
- 无序列表
ul
type = disc
circle
square
- 有序列表
ol
type =
每一项数据使用li展示
-->
手机品牌：
<ul type="square">
<li>华为
<ul type="square">
<li>mate系列</li>
<li>p系列</li>
<li>Nova系列</li>
</ul>
</li>
<li>小米</li>
<li>OPPO</li>
<li>VIVO</li>
</ul>
茶叶：
<ol type="a">
<li>黄山毛峰</li>
<li>六安瓜片</li>
<li>霍山黄牙</li>
<li>舒城小兰花</li>
<li>岳西翠兰</li>
<li>太平猴魁</li>
</ol>
<!--
全国GDP排名前10位
-->
</body>
</html>6. 超链接标签
我们可以一个页面上通过超链接标签发起一个新的路径请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
a : 超链接标签 浏览器重新请求一个页面地址
href : 请求的路径
- 相对路径
相对于当前页面的路径
- 绝对路径
以 /、http、https
target: 请求的目标窗口
- _self : 在当前窗口，会覆盖当前窗口
- _blank : 会开启一个新窗口发起请求
-->
<a href="http://baidu.com">百度</a>
<a href="http://qq.com" target="_self">qq</a>
<a href="Demo05-图片标签.html">demo06</a>
<!--
我最喜欢的历史人物：
- 曹操
- 郭嘉
- 刘备
-->
</body>
</html>7. 表格标签
-
table
-
tr
-
td
-
thead
-
tbody
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table： 表格
tr : 行标签
td : 列标签
-->
<!-- 展示科目信息
1. 展示哪些信息
姓名 性别 家乡 身份证号
2. 添加信息
1. 一个table就是一个表格
2. 一个tr就是一行
3. 一个td就是一列
border :边框
width: 宽度
-->
<table border="1px" width="200px">
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>teacher_id</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>java</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>军事</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>心学</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>-
colspan
-
rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
合并行，合并列
colspan ： 合并列
一列占几列
rowspan ： 合并行
一列占几行
align: 表格居中
text-align ： 文本居中
-->
<table border="1px" width="300px"
height="200px" align="center" style="text-align:center ;">
<tr>
<td colspan="3">
<b>课程表</b>
</td>
<!--
<td></td>
<td></td>
-->
</tr>
<tr>
<td rowspan="3"> 周一</td>
<td>上午</td>
<td>语文</td>
</tr>
<tr>
<!-- <td></td> -->
<td>下午</td>
<td>java</td>
</tr>
<tr>
<!-- <td></td> -->
<td>晚上</td>
<td>mysql</td>
</tr>
<tr>
<td rowspan="3"> 周二</td>
<td>上午</td>
<td>语文</td>
</tr>
<tr>
<!-- <td></td> -->
<td>下午</td>
<td>语文</td>
</tr>
<tr>
<!-- <td></td> -->
<td>晚上</td>
<td>语文</td>
</tr>
</table>
</body>
</html>8. 表单
-
form
-
action
-
method
-
-
input
-
text
-
pasword
-
radio
-
checkbox
-
-
select
-
option
-
-
textarea
-
rows
-
cols
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form : 表单，用来提交数据
1. action属性 提交表单的路径
2. method属性 提交表单的形式
- get (默认)
- post （只要是form，一定都是post）
提交数据的形式
1. 输入文本 能看到
2. 输入密码 看不到
3. 不准输入 只能选择
单选，多选，下拉
-->
<form action="xxx" method="post">
<!-- 文本-->
用户名：<input type="text" /> <br>
<!-- 密码-->
密码： <input type="password" /> <br>
出生日期：<input type="date" /> <br>
<!--
radio表示单选
一伙的只能选择一个，他们的name属性一定一样
一定要定义value属性，选择某一个单选框获取的就是该输入框的value属性值
-->
性别 ：<input type="radio" name="x" value="1"/>男
<input type="radio" name="x" value="0"/>女 <br>
<!--
checkbox 表示多选
一定要定义value属性，选择某一个单选框获取的就是该输入框的value属性值
-->
爱好 ：<input type="checkbox" value="yy"/>游泳
<input type="checkbox" value="jj"/>击剑
<input type="checkbox" value="qq"/>铅球 <br>
<!-- select : 下拉框
option定义每一个选项的值
定义value属性值
-->
家乡：
<select>
<option value="">请选择</option>
<option value="ah">安徽省</option>
<option value="bj">北京市</option>
<option value="sh">上海市</option>
<option value="cq">重庆市</option>
</select> <br>
<!--
textarea : 文本域
rows ： 高
cols ： 宽
-->
自我介绍:
<textarea rows="5" cols="20"></textarea> <br>
<!-- 普通按钮-->
<input type="button" value="这是一个按钮"/>
<!-- 提交按钮 -->
<input type="submit" value="这是一个按钮,提交按钮"/>
</form>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
