<!-- 文档类型为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>
3470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
