一 HTML结构
HTML代码是由"标签"构成的如:<body>hello</body>
一 HTML文件基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
html标签:是整个html文件的根标签(最顶层标签)
head标签:中写页面的属性
body标签:写的是页面上显示的内容
title标签:表示页面的名称
二 标签层次结构
head和body是html的子标签(html就是head和body的父标签)
title是head的子标签.head是title的父标签
head和body之间是兄弟关系
标签之间的结构关系,构成了DOM树
DOM是Document Object Mode(文档对象模型)的缩写
快速生成代码框架:
在IDEA中创建文件xxx.html,直接输入!,按tab键,此时能自动生成代码的主体框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>细节解释: (了解即可, 不必深究)
称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览
器会根据此处的声明提示是否进行自动翻译).
描述页面的字符编码方式. 没有这一行可能会导致中文乱码.
name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).
三 HTML常见标签
3.1 注释标签
注释不会显示在界面上,目的是提高代码的可读性
注释标签:<!--我是注释-->
ctrl + / 快捷键可以快速进行注释/取消注释
注释的原则:1.要和代码逻辑一致;2.尽量使用中文;3.不要传递负能量
3.2 标题标签:h1- h6
有六个,从h1 - h6,数字越大,则字体越小
<html>
<head>
<title>第一个HTML页面</title>
</head>
<body>
hello,world!
<!-- 世界,你好!!!!! -->
世界 你好!!
<h1>标题标签1<h1>
<h2>标题标签2<h2>
<h3>标题标签3<h3>
<h4>标题标签4<h4>
<h5>标题标签5<h5>
<h6>标题标签6<h6>
</body>
</html>
3.3 段落标签:<p></p>或<p>
段落标签和换行标签<br>是不一样的
3.4 换行标签:<br/>
br 是break的缩写.表示换行
br是一个单标签(不需要结束标签)
br标签不想p标签那样带有一个很大的空隙
<br/>是规范写法.不建议写成<br>
3.5 格式化标签
加粗:strong标签和b标签
倾斜:em标签和i标签
删除线:del标签和s标签
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>3.6 图片标签:img
img标签必须带有src属性,表示图片的路径
<ing src = "rose.jpg">
此时要把rose.jpg这个图片文件放到和html中的同级目录中
注意:
1.属性可以有多个,不能写到标签之前
2.属性之间用空格分割,可以是多个空格,也可以是换行
3.属性之间不分先后顺序
4.属性使用"键值对"的格式来表示
img标签的其他属性:
alt:替换文本,当文本不能正确显示的时候,会显示一个替换的文字
title:提示文本,鼠标放到图片上,就会有提示
width/height:控制宽度高度.高度和宽度一般改一个,另外一个会等比例缩放.否则就会图片失衡
border:边框,参数是宽度的像素.但是一般使用CSS来设定
3.7 超链接标签:a
href:必须具备,表示点击后会跳转到那个页面
target:打开方式,默认是_self.如果是_blank则用新的标签页打开
链接的几种形式:
外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度</a>内部链接: 网站内部页面之间的链接. 写相对路径即可.
在一个目录中, 先创建一个 1.html, 再创建一个 2.html
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="test.zip">下载文件</a>网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>锚点链接: 可以快速定位到页面中的某个位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>3.8 表格标签-组合标签
基本使用:
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域
table 包含 tr , tr 包含 td 或者 th.
<table align="center" border="1" >
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>23</td>
</tr>
</table>
3.8.1 合并单元格
跨行合并: rowspan="n(几行)"
跨列合并: colspan="n(几列)"
步骤:
1. 先确定跨行还是跨列
2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
3. 删除的多余的单元格
<tr>
<td>张三</td>
<td rowspan="2">18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
将李四和王五的性别进行合并:
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td rowspan="2">女</td>
</tr>
<tr>
<td>王五</td>
<td>18</td>
</tr>
</tbody>
将王五哪一行的姓名和年龄进行合并(跨列)
<tr>
<td colspan="2">王五|18</td>
</tr>
3.9 列表标签
主要使用来布局的. 整齐好看.
无序列表[重要] ul li , .
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.
3.9.1 无序列表:ul(unorderedlist) li(list)
<h3>无序列表<h3>
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙僧</li>
</ul>
3.9.2 有序列表: ol(ordered list) li(list)
<h3>MySQL 事务具备以下四大特性(有序列表)</h3>
<ol>
<li>原子性</li>
<li>一致性</li>
<li>持久性</li>
<li>隔离性</li>
</ol>
3.9.3 自定义列表
<h3>自定义列表</h3>
<dl>
<dt>标题</dt>
<dd>数据1</dd>
<dd>数据2</dd>
<dd>数据3</dd>
<dd>数据4</dd>
</dl>
3.10 表单关系(组合标签)
表单是让用户输入信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签.
3.10.1 form标签
<form action="http://www.baidu.com" method="get">
</form>描述了要把数据按照什么方式, 提交到哪个页面中.
3.10.2 input标签
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.
form action="http://www.baidu.com" method="get">
姓名:<input type="text">
<br/>
密码:<input type="password">
</form>
1 文本框
<input type="text">
2 密码框
<input type="password">
3 单选框
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
4.复选框
爱好:<input type="checkbox">听音乐
<input type="checkbox">看书
<input type="checkbox">跑步
<input type="checkbox">打羽毛球
5.按钮
按钮有三种分别是:普通按钮 提交按钮 清空按钮
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="清空按钮">
<button>button</button>
3.10.3 label 标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">3.10.4下拉菜单:
学校:<select>
<option>北京大学</option>
<option selected="selected">清华大学</option>
<option>武汉科技大学</option>
</select>selected="selected":默认的内容,每次刷新默认值都是这个值
3.10.5 备注标签:textarea标签
备注:<textarea rows="7" cols="50">
</textarea>
总代码:
<form action="http://www.baidu.com" method="get">
姓名:<input type="text"><br />
密码:<input type="password"><br>
性别:<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
爱好:<input type="checkbox">听音乐
<input type="checkbox">看书
<input type="checkbox">跑步 <input type="checkbox">打羽毛球<br>
头像:<input type="file">
<label>我是label</label><br>
学校:<select>
<option>北京大学</option>
<option selected="selected">清华大学</option>
<option>武汉科技大学</option>
</select>
<br>
备注:<textarea rows="7" cols="50">
</textarea>
<br>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="清空按钮">
<button>button</button>
</form>3.10.6 无语义标签:div & span
作用于划分区域
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.
<div>
<h1>这是一篇java文章</h1>
<div>
java是一个非常常用的后端技术,火锅慧慧.
</div>
<div>
它包含了:JavaSE JavaWeb JavaEE....
</div>
<span style="color: red;">
JavaSE包含了xxx!
</span>
<span style="color: green;">
JavaEE包含了xxx.
</span>
</div>
扫一扫
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
