<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑马程序员</title>
</head>
<hr>
<!--
img标签(图片标签):
src:图片资源路径
width:宽度(px,像素;%,相对于父元素的百分比)
height:高度
路径书写方式
绝对路径:
1.绝对磁盘路径:
2.绝对网络路径:
相对路径:
./:当前目录 ,./可以省略
../:上一级目录
-->
<img src="" width="" height=""> 正文
<!-- 标题标签 -->
<h1></h1>
<!-- 水平线标签 -->
<hr>
<hr>
<!-- 视频标签<video>
1.src:规定视频的url
2.controls:显示播放控件
3.width:宽度
4.height:长度
-->
<!-- 音频标签:<audio>
1.src:规定音频的url
2.controls:显示播放控件 -->
<!-- 段落标签:<p> -->
<!-- 文本加粗标签:<b>/<strong>(强调) -->
<!-- 表格标签:
<table>:定义表格整体,可以包裹多个<tr>
border:规定表格边框的宽度
width:规定表格的宽度
cellspacing:规定单元之间的空间
<tr>:表格的行,可以包裹多个<td>
<td>:表格单元格(如果是表头单元格,可以替换为<th>)
-->
<!-- 表单标签:
场景:在网页中主要负责数据采集功能,如注册登录等数据采集
标签:<form>
表单项:不同类型的input元素,下拉列表,文本域等
<input>:定义表单项,通过type属性控制输入形式
<select>:定义下拉列表 <option>定义列表项
<textarea>:定义文本域
属性:
action:规定当提交表单时向何处发送表单数据,URL
method:规定用于发送表单数据的方式。GET,POST
get:在url后面拼接表单数据,比如?username=Tom&age=12,url长度有限制 默认值
post:在消息体(请求体)中传递的,参数大小无限制的
type取值 描述
text默认值,定义单行的输入字段
password定义密码字段
radio定义单选按钮
checkbox定文复选框
file定义文件上传按钮
date/time/datetime-local定义日期/时间/日期时间
number定义数字输入框
email定义部件输入框
hidden定义隐藏域
submit / reset / button定义提交按钮 / 重置按钮 /可点击按钮
-->
<span>此标签无任何意义</span>
p{
text-indent: 35px; /*设置首行缩进*/
line-height: 45px; /*设置行高*/
}
#plast{
text-align: right; /* 对齐方式 */
}
#center{
width:65%;
margin: 0% 17.5% 0% 17.5% ; /* 外边距, 上 右 下 左 */
<!-- 简化 margin: 0 auto;(浏览器自动计算) -->
}
<!--
新浪新闻-页面布局
布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
• 标签:<div> <span>
• 特点:
• div标签:
• 一行只显示一个(独占一行)
• 宽度默认是父元素的宽度,高度默认由内容撑开
• 可以设置宽高 (width、height)
• span标签:
•一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高 (width、height)
-->
<!-- web网站的组成:浏览器 前端服务器 后端服务器 数据库服务器
前后端分离开发
前端web开发:
HTML,CSS,JavaScript
基于JavaScript封装的高级技术:Vue,Element
前端程序部署的服务器:Nginx
后端web开发:
Maven , SpringBoot web 基础 , Mysql ,Spring Boot Mybatis , SpringBoot web开发 , SpringBoot web进阶
网页本质:前端代码
浏览器中对代码进行解析和渲染的部分:浏览器内核
前端基础技术:Html:网页结构
CSS:网页的表现(样式)
JavaScript:网页的行为
Html:超文本标记语言(由标签构成的语言),除了文字还可以定义文本·图片·视频·音频等。
Html的标签都是事先定义好的,由浏览器负责解析。
CSS:层叠样式表,用于控制页面的样式。
w3Schools:JavaWeb的标签参考网站。
Html快速入门:
1.创建文本文件,改后缀为.html
2.编写html结构标签
3.在<body>中填写页面内容,<title>填写网站地址名称
** Html不区分大小写,属性不区分单引号和双引号,Html语法松散并不严格。
记事本开发Html页面
<html>
<head>
<title>原神官网</title>
</head>
<body>
<h1>元神启动!</h1>
<img src="1.jpg"/>
</body>
</html>
图片标签:<img>
src:指定图像的url(绝对路径/相对路径)
width:图像的宽度(像素:px/相对于元素的百分比:相对于父元素的百分比)
heigth:图像的高度(像素:px/相对于像素的百分比:相对于父元素的百分比)
父元素:body
绝对磁盘路径:右键图片->属性->安全->对象名称后面的就是绝对路径
绝对网络路径:通过点击网页图标到最后的图片页面地址,地址则为绝对网络路径(网络上必须要有此图片,且必 须联网)
相对路径(推荐):./ :当前目录 , ./ 可以省略
../ : 上一级目录
标题标签:<h1>~<h6>
水平线标签:<hr>
css引入方式:
行内样式:写在标签的style属性中(只对当前的标签有效,不推荐)
<h1 style="***:***,***:***;">中国新闻网<h1>
前***为属性名 后***为属性值
例:<h1 style="color: brown;">焦点访谈:中国底气 新思想夯实大国粮仓</h1>
内嵌样式:写在style标签中(可以写在页面的任何位置,但通常约定写在head标签中)
<style>
h1 {/*标签选择器 */
color: red;
}
</style>
这个内嵌的含义:针对于当前的html页面中的所有h1标签都是有效的
外联样式:写在一个单独的.css文件中(需要通过link 标签在网页中引入)
h1{
***:***;
***:***;
}
例:h1{/*标签选择器 */
color: red;
}
<link rel="stylesheet" href="../CSS/news.css">
颜色的表示形式:
关键字:预定义的颜色名 red,blue,green... ...
rgb表示法:红绿蓝三原色,每项取值范围:0~255 rgb(红,绿,蓝) , rgb(0,0,0) , rgb(255,255,255) , rgb(255,0,0)
例:color : rgb(0,0,255);;
十六进制表示法:#开头,将数字换成十六进制表示 #000000,#ff0000 , #cccccc , 简写(如果格式相 同):#000 、 #ccc
例:color :#ff0000
颜色不确定:使用拾色器,会自动给出rgb表示和十六进制的表示方法
css选择器:
1.元素选择器 元素名称{ h1{
color:red; color:red; <h1> Hello CSS </h1>
} }
2.id选择器 #id属性值{ #hid{
color:red; color:red; <h1 id="hid"> CSS id Selector </h1>
} }
3.类选择器 .class属性值{ .cls{
color:red; color:red; <h1 class="cls"> CSS class Selector </h1>
} }
优先级:id>类>元素
font-size:设置字体大小
-->
<!-- 超链接 -->
<a href="..." target="...">央视网</a>
<!--
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开
-->
</body>
</html>