前端-HTML
本文最后更新于 2024-11-22，文章内容可能已经过时。
1. HTML概述
(Hyper Text Markup Language)超文本标记语言。
超文本：可以通过点击完成文本和文本之间的联系。
标记：标记也叫标签<标签内容>
HTML用来使用浏览器显示数据。
2. HTML基础
1 HTML快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个页面</title>
</head>
<body>
这是一个内容........
</body>
</html>2. HTML组成和语法
HTML文件后缀名
XXX.html XXX.htm标签
<abc> </abc> 开始标签 结束标签 <abc/> 自闭合标签属性
在开始标签或在自闭合标签中写键值对 属性名="属性值" 属性值使用单引号或双引号引起来,属性名建议使用字母开头 多个属性之间用空格隔开大小写
HTML标签不区分大小写,写大写和小写都行,建议使用小写HTML语法不严格,就算写的不对可能也不报错!
3. HTML常用标签
1. 文件标签
<!DOCTYPE html>: 用来表示这个文件是一个html文件
html: html文件的根标签，一个文件只有一个根标签
head: 头，头里面以后要写引入其他文件的代码
title: 标题，会显示在网页的标题位置
body: 体，书写要显示的数据内容
HTML是语法不严格的语言,就算写错了很多情况也可以显示2. 文本标签
注释：
<!-- -->
标题标签：
<h1>
...
...
<h6>
从h1到h6标题逐渐变小
段落标签：
<p>
换行标签：
<br/>
水平线标签：
<hr color="red" width="50%" size="2px" />
加粗：
<b>
斜体：
<i>
字体标签：
<font color="red" size"7" >
居中标签：
<center>
属性：
width:
取值: 50% 百分比
500px 像素
color:
取值: red 红色
#000000 红绿蓝
大家不需要详细记哪些标签有哪些属性3.案例
按照要求显示文本信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="orange"/>
<p><font color="red">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b> 联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。<br>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p>
<p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p>
<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>
<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="orange"/>
<center>
<font size="2" color="#a9a9a9">
江苏传智播客教育科技股份有限公司<br>
版权所有Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</font>
</center>
</body>
</html>4. 超链接标签
<a>
href: 表示超链接的位置
target:打开方式
_self:在当前页码跳转
_blank:在新窗口页码跳转
<a href="https:\\www.baidu.com" >百度一下</a>5. 图片标签
<img>
src :表示图片的位置
alt :图片无法显示时要显示的文字
width :宽度
height:高度
<img src="img/123.jpg" alt="这是一个美女" width="200px" height="300px">6. 列表标签
无序列表
<ul>
<li>
type:
desc 实心圆圈
circle空心圆圈
square实心方块
有序列表
<ol>
<li>
type:
1 A a I i7.div和span标签
div叫块级标签
div会换行
span叫行内标签
span不会换行8. 特殊字符
空格
< <
> >9. 表格标签
<table> 表格
border 边框
width 宽度
cellspacing 单元格和单元格的间距
cellpadding 单元格和文字的间距
align 位置
bgcolor 背景颜色
<caption> 表格标题
<tr> 行
<td> 单元格(列)
<th> 表头(可以替代td,有居中加粗的效果)
合并行 rowspan="几行"
合并列 colspan="几列"10.案例
完成一个表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" align="center" cellspacing="0px" width="300px">
<caption>学生成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>1</td>
<td>小龙女</td>
<td>女</td>
<td>100</td>
</tr>
<tr align="center">
<td>2</td>
<td>杨过</td>
<td>男</td>
<td rowspan="2">90</td>
</tr>
<tr align="center">
<td>3</td>
<td>金轮法王</td>
<td>男</td>
</tr>
<tr align="center">
<td>总成绩</td>
<td colspan="3">190</td>
</tr>
</table>
</body>
</html>4. HTML表单标签
1.表单
HTML表单：用于采集用户输入的数据和服务器进行交互。
2.表单项
<form>:表单
action :表示表单提交的位置
method :表示参数发送的方式
get:把参数写在地址栏上面
不太安全
有大小限制
post:把参数放在请求体中
比较安全
没有大小限制
<input>：可以通过type属性值，改变元素展示的样式
type属性：
普通文本框
text：
<input type="text" id="aaa" placeholder="请输入用户名" name="username" >
密码框
password：
<input type="password" placeholder="请输入密码" name="password">
单选框
radio:
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
多选框
checkbox:
<input type="checkbox" name="hobby" value="dlq">打篮球
<input type="checkbox" name="hobby" value="ct">唱跳
<input type="checkbox" name="hobby" value="rap">rap
文件
file：
<input type="file" name="file">
隐藏
hidden：
<input type="hidden" name="aaa" value="123">
日期
date:
<input type="date" name="date">
重置
reset:
<input type="reset">
提交：
submit：
<input type="submit" value="登陆">
image:
<input type="image" src="img/234.jpg">
按钮：
button:
<input type="button" value="按钮">
<label>:
当label的for属性和input的id属性值一样时,点击lebel光标会进入到对应的input
<label for="aaa">用户名:</label>
<input type="text" id="aaa" placeholder="请输入用户名" name="username" >
<select>:下拉框
<option>:选项
<select name="sf">
<option value="">--请选择--</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="山西">山西</option>
<option value="河北">河北</option>
</select>
<textarea>:大文本框
<textarea cols="30" rows="5" name="grjs"></textarea>
数据从页面发送给后端,需要以键值对的形式发送, name是键,value是值
地址栏数据形式:
XXX页面.html?username=zhangsan&password=1234565. 案例：黑马旅游网简单注册页面
<!--注册表单-->
<form action="#" method="get">
<table>
<!--第一行-->
<tr>
<td>姓名</td>
<td>
<input type="text" placeholder="请输入姓名" name="username">
</td>
</tr>
<!--第二行-->
<tr>
<td>密码</td>
<td>
<input type="password" name="password">
</td>
</tr>
<!--第三行-->
<tr>
<td>生日</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<!--第四行-->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<!--第五行-->
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="抽烟">抽烟
<input type="checkbox" name="hobby" value="喝酒">喝酒
<input type="checkbox" name="hobby" value="烫头">烫头
</td>
</tr>
<!--第六行-->
<tr>
<td>头像</td>
<td>
<input type="file" name="file">
</td>
</tr>
<!--第七行-->
<tr>
<td>省份</td>
<td>
<select name="sf" >
<option value="">--请选择--</option>
<option value="北京">北京</option>
<option value="山西">山西</option>
<option value="河北">河北</option>
</select>
</td>
</tr>
<!--第八行-->
<tr>
<td>建议</td>
<td>
<textarea name="advice" cols="30" rows="4"></textarea>
</td>
</tr>
<!--第九行-->
<tr>
<td></td>
<td>
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>6.CSS概述
层叠样式表（Cascading Style Sheet）
层叠：多个样式可以作用在同一个html的元素上，同时生效
作用：页面美化和布局控制
好处：
1. 功能强大 2. 将内容展示(HTML)和样式控制(CSS)分离 HTML和CSS不是一个人做的
7.CSS语法
1.HTML引入CSS
1. 内联样式
在标签内使用style属性指定css代码
[尽量不用]
2. 内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
[学习阶段常用]
3. 外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
[工作用要用]2.基本选择器
选择器就是选择元素的各种方式
元素选择器：
span
class选择器：
.
id选择器：
#
优先级: id > class > 元素3. 扩展选择器
选择所有元素：
*
并集选择器：
div,span 获取div元素和span元素
后代选择器：
div div 获取div里面的div元素(忽略中间层级)
属性选择器:
元素名[属性名="属性值"]4.CSS的属性[不要记]
格式：
选择器{
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
属性：
1. 边框
border：属性：（宽度 线条 颜色）
border: 1px solid red;
2. 尺寸
width：宽度
height：高度
width:400px;
height: 100px;
3.字体文本：
font-size：字体大小
color：文本颜色
text-align：对齐方式
line-height：行高
font-size: 50px;
color: red;
text-align: center;
line-height: 100px;
4.背景
background-color: 背景颜色
background-image: 背景图片
background-size: 背景大小
background-repeat:是否重复
background-color: gray;
background-image: url("img/123.jpg");
background-size: 50px;
background-repeat: no-repeat;
5. 盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
6. float：浮动
left 左浮动
right 右浮动
声明：此文章免费共享，欢迎大家使用。
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果