一、简介:
1.HTML:超文本标记语言、网页(文本,音频,视频),做页面,写给浏览器。
2.特点:
1.不区分大小写。
2.标记语言成对出现。有开始有结束。
<abc>内容
</abc>
控制颜色,指出有限范围
3.不是特别严苛。换行省写标签关闭。4.扩展名为html,httm
5.靠各式各样标签或标记与浏览器交流。
简单几行:body中写什么在页面出现什么。
<html>
<head>
<title>我是标题</title>
</head>
<body>
<!-- 页面显示内容 -->
姓名: <input type="text"/><br> <!-- 输入框 -->
密码:<input type="password"/>
</body>
<html>
3.注释怎么写: <!-- 我是注释 -->
修改后保存用Ctrl+H 输入注释用Ctrl+/
4.Hbuilder的使用
新建项目---项目名,路径,空
按住项目右键新建---html文件
输入后,运行,浏览器右击查看源码
也可选择内置浏览器:阉割版(yan ge ban)功能不全
代码1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 定义基本语法格式 utf-8 -->
<title>你好,小朋友。</title>
</head>
<body>
下雪了!!!小朋友!!!
</body>
</html>
代码2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> 青年大学习 </h1>
<h2 align="center"> 第五期 </h2>
<!-- 标题:粗体,加粗,换行 ,一共可设置为6级,设置居中-->
<hr width="80%">
<!-- 分割线宽度是浏览器宽度的80% -->
<p> <!-- 段落标签 -->
学习新思想
</p>
争做新青年
</body>
</html>
二、Html基本标签
1.本地图片,网络图片插入
本地图片方式:本地土地插入放在imag文件夹中。
<img src="img/lb.bmp"/> <--图片地址-->
网络图片插入方式:
<img src="网址"/>
2.列表插入
分为无序列表和有序列表
无序:<ul>
<ul>
<li>张飞</li>
<li>吕布</li>
<li>曹操</li>
</ul>
即:
- 张飞
- 吕布
- 曹操
有序:<ol>
<ol>
<li>张飞</li>
<li>吕布</li>
<li>曹操</li>
</ol>
即:
- 张飞
- 吕布
- 曹操
3.div和span
div:单独占一行,且背景颜色占一行,div中的内容相当于一个块级元素。
span:字节有几个占多少。
测试代码:
1<div style="background-color:red;">1+1=2</div>2
3<span style="background-color:green;">1+1=2</span>4
结论:
可看出上一行红色占整个一行,并且1和2不在1+1=2这一行。
而下面绿色仅出现在有字节的部分,且3和4可和1+1=2一行。
4.实体符号
比如大于、小于符号html中敲不出,如c语言中ASCII码一样,得敲出他的转义字符。
1. ® //表示®
2. <br>是换行标签;
若想真敲<br>应该是<br>
复习:
5.表格(由行组成,行又由列组成)
行,列的表示方式
边框表示border=“1”,宽度width表示
效果:
6.超链接:跳转到其他页面
a:指定超链接位置
href:指定跳转页面;跳转本地网站,跳转外网
7.表单
收集用户填写信息。
text:文本 password:密码 radio:单选
单选按钮如何互斥?答:只要他们的name属性值相同即可,即可判断为只可选其中之一。
submit 按钮默认为提交
问题1:表单提交后,表单页面刷新了下,地址栏发生了变化。action后接提交地址。
问题2:?号是址网址
value指定单选按钮的值。
sex要么1要么2;