HTML基础入门
来源：互联网 发布：知豆汽车能开多久 编辑：程序博客网 时间：2024/06/01 10:22
1.HTML简介:
HTML:超文本标记语言
常用浏览器：IE,Edge,Firefox,Chrome(Opera),safari
Chrome：最常用
HTML（HyperText MarkLanguage）：超文本标记语言
XML和HTML的联系
XML：可扩展标记语言
--可扩展标签语言：
单标签等价于内容为空的双标签
属性：id，name,
内容:标签里面的东西
元素：标签+属性+内容
HTML：语法固定（w3c），用来显示数据
--可以将HTML理解为标签固定的XML （是XML的一个特例）
网页的版本不要用严格的版本，既是网页错误一部分也能显示
---补充
1.w3c中文官方网站：www.w3school.com.cn
2.创建WEB项目注意事项：
--在JavaEE视图下开发WEB项目（Eclipse右上角）
--创建项目时要选择package为war
右键点击deployment，选择Gennerate
网页放在src/main/webapp
<mata> 元素
对文件的配置
一、.html的基本结构
<!-- html5 -->
<!doctype htlm><!-- 唯一的根元素 -->
<html>
<!-- 网页的基本要求 -->
<head>
<!-- 设置网页的编码 -->
<meta charset="utf-8">
<!-- 设置网页的标题 -->
<title>第一个网页</title>
</head>
<!-- 网页的详细内容 -->
<body>
HTML~~~哈喽
</body>
</html>
二、.文本元素
标题， 段落， 列表（有序ol 无序 ul）
分区元素：用于为元素分组（在写网页的第一步就要做）
分区之后对所有元素可以直接操作
<div>默认是看不见的
块元素：独立成行
<!-- 1.标题 -->
<h1>交通工具</h1>
<h2>车</h2>
<h3>船</h3>
<!-- 2.段落 -->
<p>qqqqq </p>
<p>aaaaa </p>
<!-- 3列表 -->
<!-- 3.1有序列表 -->
<ol>
<li>北京市</li>
<li>深圳市</li>
<li>重庆市</li>
</ol>
<!-- 3.2无序列表 -->
<ul>
<li>万州区</li>
<li>九龙坡区</li>
<li>北碚区</li>
</ul>
<!-- 3.3列表嵌套 （先写外层列表，再写内层列表）-->
<ol>
<li>
重庆市
<ul>
<li>万州区</li>
<li>北碚区</li>
<li>永川区</li>
</ul>
</li>
<li>
广东省
<ul>
<li>广州</li>
<li>深圳</li>
</ul>
</li>
</ol>
<!-- 4.行内元素 -->
<p>重庆市九龙坡区<span style="color:red">智博中心</span>19层3教室</p>
span：选中文字加样式
空格折叠：多个空格，多个制表符为一个空格
若要产生多个空格，使用实体引用
<br>：换行
实体名称： 空格： 
< ：<
<!-- 5.空格折叠 -->
<p>
那是一个 秋天，<br>
风儿那么 缠绵，<br>
用它 的双肩， <br>
托起 他重生的起点。<br>
</p>
三、图像和超链接
<img>:将元素添加到页面
相对路径：写网站和图片的相对路径
<!-- 1.图片 -->
<!-- 1.1绝对路径：
从根目录开始一直写到图片名称为止。
如：d:/day01/image/01.jpg
/home/soft01/image/01.jpg
弊端：在软件上线给客户使用时，若客户将其放在其他盘符下，则所有路径都错了-->
<!-- 1.2相对路径：
只需要写出图片和网页的相对关系即可，项目放在任何盘符下，这两者关系不会变，所以不会有影响
网页和图片平级：01.jpg
图片在网页的下级： a/01.jpg
图片在网页上级：../01.jpg-->
<p>
<img src="01.jpg">
<img src="i/02.jpg">
<img src="../03.jpg">
<!-- 一般情况下是这样用 -->
<img src="../images/04.jpg">
</p>
<a>:超级链接
<!-- 2.超链接 -->
<!-- 2.1链接到其他网页 -->
<p>
<a href="http://www.tmooc.cn">达内</a>
<a href="http://doc.tedu.cn" target="_blank">文档</a> （打开新标签）
</p>
<!-- 2.2链接到某个锚点（位置） -->
<!-- 1)将这个位置做成锚，并命名为hero -->
<p><a name="hero">英雄</a>《英雄联盟》（简称lol）是由美国Riot Games开发</p>
<!-- 2)利用锚点将超链接链接到锚上去 -->
<p><a href="#hero">英雄</a>联盟</p>
<!-- 网页的顶部默认就是锚，没有名字 -->
<p><a href="#">回到顶部</a></p>
四、表格
作用：组织结构化操作
给表格加框：标签加属性(不推荐使用)； 推荐使用css
<table border="1" cellspacing="0" width="30%"><!-- 表格边框为1 单元格之间的距离为0 占整个网页的30%-->
<tr>
<td>哆啦A梦</td>
<td>hellokitty</td>
</tr>
<tr>
<td>小黄人</td>
<td>大鹏</td>
</tr>
</table>
跨行跨列不能通过css实现
跨行属性：由上向下延伸 rowspan
跨列属性：当前单元格从左到右延伸 colspan
<!-- 跨列和跨行 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td colspan="2">哆啦A梦</td>
<!-- <td>hellokitty</td> -->
</tr>
<tr>
<td>小黄人</td>
<td>大鹏</td>
</tr>
</table>
<table border="1" cellspacing="0" width="30%">
<tr>
<td rowspan="2">哆啦A梦</td>
<td>hellokitty</td>
</tr>
<tr>
<!-- <td>小黄人</td> -->
<td>大鹏</td>
</tr>
</table>
<!-- 行分组 -->
<table border="1" cellspacing="0" width="40%">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>001</td>
<td>鼠标</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>键盘</td>
<td>150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<!-- <td></td> -->
<td>200</td>
</tr>
</tfoot>
</table>
五、表单
表单：
作用：让用户输入数据。
1. 表单元素：用来圈定数据提交的范围。（只有在表单元素内的数据才能提交）
<!-- 1.表单元素： 只有在此元素内的数据才能提交 。
action: 声明表单要提交给谁。
method/enctype：
-->
<form action="http://www.tmooc.cn">
2.表单控件：让用户输入数据。 （一共12个 -- 都重要）
<!-- 2.表单控件： 用来让用户输入数据 。-->
<!-- 2.1 input元素： 一共有9个，通过type属性来区分它们 -->
<!-- 1)文本框 ：
value:设置默认值
maxlength：限制最大长度
readonly:设置只读-->
<p>
账号：<input type="text" value="admin" maxlength="8" readonly/>
</p>
<!-- 2)密码框： 属性同上 -->
<p>
密码：<input type="password"/>
</p>
<!-- 3)单选框 (组名相同才会互斥)
name：设置组名，同一组radio互斥
checked: 设置默认选中
value:
-->
<p>
性别：
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" >女
</p>
<!-- 4)多选框
checked:设置默认选中
name/value:-->
<p>
兴趣：
<input type="checkbox" checked/>琴
<input type="checkbox" checked/>棋
<input type="checkbox"/>书
<input type="checkbox"/>画
</p>
<!-- 5)文件框 -->
<p>
头像：<input type="file"/>
</p>
<!-- 6)隐藏框： 用来传递一些不需要被用户看到的数据。数据的值通过value进行设置。 -->
<p>
<input type="hidden"/>
</p>
<!-- 7)按钮：
submit: 将表单中的数据提交给服务器
reset： 重置表单
butten： 默认没有功能，需要js自定义
按钮的名字都通过value来设置-->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="TRY"/>
<!-- 2.2 其他元素： 一共3个，标签名都不同-->
<!-- 1)label: 用来管理表单中的文字，可以将文字和框绑定到一起，从而增加框的面积。
绑定的步骤：a.增加id属性，给框命名
b.for="id值" 实现绑定 -->
<p>
<input type="checkbox" id="readed"/>
<label for="readed">我已阅读并自愿遵守此协议！</label>
</p>
<!-- 2)下拉选
value:
selected:设置默认选中 -->
<p>
家乡：
<select>
<option>请选择</option>
<option selected>重庆</option>
<option>成都</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
<option>新疆</option>
<option>厦门</option>
</select>
</p>
<!-- 3)文本域 -->
<p>
简介：
<textarea rows="6" cols="30">山城，火炉</textarea>
</p>
1.HTML简介
常用浏览器：IE,Edge,Firefox,Chrome(Opera),safari
Chrome：最常用
HTML（HyperText MarkLanguage）：超文本标记语言
XML和HTML的联系
XML：可扩展标记语言
--可扩展标签语言：
单标签等价于内容为空的双标签
属性：id，name,
内容:标签里面的东西
元素：标签+属性+内容
HTML：语法固定（w3c），用来显示数据
--可以将HTML理解为标签固定的XML （是XML的一个特例）
网页的版本不要用严格的版本，既是网页需哦了一部分也能显示
---补充
1.w3c中文官方网站：www.w3school.com.cn
2.创建WEB项目注意事项：
--在JavaEE视图下开发WEB项目（Eclipse右上角）
--创建项目时要选择package为war
右键点击deployment，选择Gennerate
网页放在src/main/webapp
<mata> 元素
对文件的配置
一、.html的基本结构
<!-- html5 -->
<!doctype htlm><!-- 唯一的根元素 -->
<html>
<!-- 网页的基本要求 -->
<head>
<!-- 设置网页的编码 -->
<meta charset="utf-8">
<!-- 设置网页的标题 -->
<title>第一个网页</title>
</head>
<!-- 网页的详细内容 -->
<body>
HTML~~~哈喽
</body>
</html>
二、.文本元素
标题，段落，列表（有序ol 无序 ul）
分区元素：用于为元素分组（在写网页的第一步就要做）
分区之后对所有元素可以直接操作
<div>默认是看不见的
块元素：独立成行
<!-- 1.标题 -->
<h1>交通工具</h1>
<h2>车</h2>
<h3>船</h3>
<!-- 2.段落 -->
<p>qqqqq </p>
<p>aaaaa </p>
<!-- 3列表 -->
<!-- 3.1有序列表 -->
<ol>
<li>北京市</li>
<li>深圳市</li>
<li>重庆市</li>
</ol>
<!-- 3.2无序列表 -->
<ul>
<li>万州区</li>
<li>九龙坡区</li>
<li>北碚区</li>
</ul>
<!-- 3.3列表嵌套 （先写外层列表，再写内层列表）-->
<ol>
<li>
重庆市
<ul>
<li>万州区</li>
<li>北碚区</li>
<li>永川区</li>
</ul>
</li>
<li>
广东省
<ul>
<li>广州</li>
<li>深圳</li>
</ul>
</li>
</ol>
<!-- 4.行内元素 -->
<p>重庆市九龙坡区<span style="color:red">智博中心</span>19层3教室</p>
span：选中文字加样式
空格折叠：多个空格，多个制表符为一个空格
若要产生多个空格，使用实体引用
<br>：换行
实体名称： 空格： 
< ：<
<!-- 5.空格折叠 -->
<p>
那是一个 秋天，<br>
风儿那么 缠绵，<br>
用它 的双肩， <br>
托起 他重生的起点。<br>
</p>
三、图像和超链接
<img>:将元素添加到页面
相对路径：写网站和图片的相对路径
<!-- 6.图片 -->
<!-- 6.1绝对路径：
从根目录开始一直写到图片名称为止。
如：d:/day01/image/01.jpg
/home/soft01/image/01.jpg
弊端：在软件上线给客户使用时，若客户将其放在其他盘符下，则所有路径都错了-->
<!-- 6.2相对路径：
只需要写出图片和网页的相对关系即可，项目放在任何盘符下，这两者关系不会变，所以不会有影响
网页和图片平级：01.jpg
图片在网页的下级： a/01.jpg
图片在网页上级：../01.jpg-->
<p>
<img src="01.jpg">
<img src="i/02.jpg">
<img src="../03.jpg">
<!-- 一般情况下是这样用 -->
<img src="../images/04.jpg">
</p>
<a>:超级链接
<!-- 7.超链接 -->
<!-- 7.1链接到其他网页 -->
<p>
<a href="http://www.tmooc.cn">达内</a>
<a href="http://doc.tedu.cn" target="_blank">文档</a> （打开新标签）
</p>
<!-- 7.2链接到某个锚点（位置） -->
<!-- 1)将这个位置做成锚，并命名为hero -->
<p><a name="hero">英雄</a>《英雄联盟》（简称lol）是由美国Riot Games开发</p>
<!-- 2)利用锚点将超链接链接到锚上去 -->
<p><a href="#hero">英雄</a>联盟</p>
<!-- 网页的顶部默认就是锚，没有名字 -->
<p><a href="#">回到顶部</a></p>
四、表格
作用：组织结构化操作
给表格加框：标签加属性(不推荐使用)；css
<table border="1" cellspacing="0" width="30%"><!-- 表格边框为1 单元格之间的距离为0 占整个网页的30%-->
<tr>
<td>哆啦A梦</td>
<td>hellokitty</td>
</tr>
<tr>
<td>小黄人</td>
<td>大鹏</td>
</tr>
</table>
跨行跨列不能通过css实现
跨行属性：由上向下延伸 rowspan
跨列属性：当前单元格从左到右延伸 colspan
<!-- 8.2跨列和跨行 -->
<table border="1" cellspacing="0" width="30%">
<tr>
<td colspan="2">哆啦A梦</td>
<!-- <td>hellokitty</td> -->
</tr>
<tr>
<td>小黄人</td>
<td>大鹏</td>
</tr>
</table>
<table border="1" cellspacing="0" width="30%">
<tr>
<td rowspan="2">哆啦A梦</td>
<td>hellokitty</td>
</tr>
<tr>
<!-- <td>小黄人</td> -->
<td>大鹏</td>
</tr>
</table>
<!-- 8.3行分组 -->
<table border="1" cellspacing="0" width="40%">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>金额</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>001</td>
<td>鼠标</td>
<td>50</td>
</tr>
<tr>
<td>002</td>
<td>键盘</td>
<td>150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<!-- <td></td> -->
<td>200</td>
</tr>
</tfoot>
</table>
五、英雄联盟-百度百科案例
1.分区：将网页分为3个区域（div）
2.将三个区域的宽设置为960（和logo宽度一样），并让他们居中
style="border:1px solid red; width:960px; margin:0 auto"
3.逐个区域写标签
第一块
<img>
第二块
<h1>
<p >   u b</p>
<table><!-- 4*4 宽：70%-->
<h2>
<ol>+<ul> 有序+无序列表
锚
<h2>
<h3>...
第三块:文字居中
<p align="center"></p>
六、表单
表单：
作用：让用户输入数据。
1. 表单元素：用来圈定数据提交的范围。（只有在表单元素内的数据才能提交）
<!-- 1.表单元素： 只有在此元素内的数据才能提交 。
action: 声明表单要提交给谁。
method/enctype：
-->
<form action="http://www.tmooc.cn">
2.表单控件：让用户输入数据。 （一共12个 -- 都重要）
<!-- 2.表单控件： 用来让用户输入数据 。-->
<!-- 2.1 input元素： 一共有9个，通过type属性来区分它们 -->
<!-- 1)文本框 ：
value:设置默认值
maxlength：限制最大长度
readonly:设置只读-->
<p>
账号：<input type="text" value="admin" maxlength="8" readonly/>
</p>
<!-- 2)密码框： 属性同上 -->
<p>
密码：<input type="password"/>
</p>
<!-- 3)单选框 (组名相同才会互斥)
name：设置组名，同一组radio互斥
checked: 设置默认选中
value:
-->
<p>
性别：
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" >女
</p>
<!-- 4)多选框
checked:设置默认选中
name/value:-->
<p>
兴趣：
<input type="checkbox" checked/>琴
<input type="checkbox" checked/>棋
<input type="checkbox"/>书
<input type="checkbox"/>画
</p>
<!-- 5)文件框 -->
<p>
头像：<input type="file"/>
</p>
<!-- 6)隐藏框： 用来传递一些不需要被用户看到的数据。数据的值通过value进行设置。 -->
<p>
<input type="hidden"/>
</p>
<!-- 7)按钮：
submit: 将表单中的数据提交给服务器
reset： 重置表单
butten： 默认没有功能，需要js自定义
按钮的名字都通过value来设置-->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="TRY"/>
<!-- 2.2 其他元素： 一共3个，标签名都不同-->
<!-- 1)label: 用来管理表单中的文字，可以将文字和框绑定到一起，从而增加框的面积。
绑定的步骤：a.增加id属性，给框命名
b.for="id值" 实现绑定 -->
<p>
<input type="checkbox" id="readed"/>
<label for="readed">我已阅读并自愿遵守此协议！</label>
</p>
<!-- 2)下拉选
value:
selected:设置默认选中 -->
<p>
家乡：
<select>
<option>请选择</option>
<option selected>重庆</option>
<option>成都</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
<option>新疆</option>
<option>厦门</option>
</select>
</p>
<!-- 3)文本域 -->
<p>
简介：
<textarea rows="6" cols="30">山城，火炉</textarea>
</p>
- HTML基础入门
- HTML--基础入门
- html基础入门
- HTML基础入门1
- HTML基础入门2
- C#基础 Html入门
- html 基础入门
- HTML 入门基础笔记
- HTML的基础入门
- HTML基础入门
- HTML基础入门2
- HTML基础入门
- HTML基础入门
- HTML基础入门（一）
- 【WEB基础】①html入门
- html基础入门知识整理
- Web基础之HTML入门
- 小白入门---HTML基础
- linux操作系统之进程概念
- 【codevs 1014】装箱问题
- 构造函数和this指针浅谈
- rsync 错误报告及解决方法
- 解决linux安装软件：/lib/ld-linux.so.2: bad ELF interpreter问题
- HTML基础入门
- 关于imessage群发消息出错 解决办法
- Web漏洞扫描工具-python
- PyQt笔记--代码备份
- NYOJ 石子合并（一）(区间DP)
- C语言高效编程的四大绝招(1)
- 关于javascript
- mybatis实战教程(mybatis in action),mybatis入门到精通
- python标准模块学习10_______sha模块
