JAVAWeb学习笔记(一)_HTML

javaweb开发学习路线
前端开发HTML\CSS\JS->Ajax\Axios->Vue\Element->前端工程化\Vue脚手架
以及Maven->SpringBoot基础\SpringMVC基础->MySQL->JDBC Mybatis->Web案例->会话跟踪技术->FilterInterceptor->AOP->SpringBoot原理
前端代码通过浏览器内核解析渲染展示网页
Web标准是为了让不同浏览器显示同一页面显示相同内容格式(HTML\CSS\JavaScript)
HTML页面的结构\CS页面的样式\JavaScript控制网页的动作和行为

HTML

HTML格式不区分大小写

标题排版

绝对磁盘路径
绝对网络路径
相对磁盘路径
<img src="img\news_logo.png">新浪政务>正文 //图片+后缀文字
width="300px"//宽度像素为300
width="80%"//占父元素80%

<h1></h1>//一级标题
<hr>//水平分割线
w3school.com HTML\CSS\JavaScript参考手册\说明文档

CSS样式

行内样式
<h1 style="color: red;">焦点访谈:中国底气</h1>
内嵌样式

<style>
	h1{
		color: red;
	}
</style>

外嵌样式
<link rel="stylesheet" href="./CSS/news.css">//样式内容放于.css文件
元素选择器

span{
	color: #969696;
} */

类选择器

.cls {
	color: #969696;
}

ID选择器,优先级高

#time{
	color: #969696;
	font-size: 13px;
}

超链接

<a href="http://gov.sina.com.cn" target="_self">新浪政务</a>
CSS样式
text-decoration: none;//规定添加到文本的修饰.下划线等

正文排版

音频

<audio src="audio/1.mp3" controls></audio>

视频

<video src="video/1.mp4" controls="controls" width="950px"></video>

<br>//换行
<p></p>//段落标签
<b>央视网消息</b><strong>（焦点访谈）</strong>//文本加粗标签
CSS样式
line-height: 40px;//行高
text-indent: 35px;//缩进
text-align: right;//对齐方式

整体布局

盒子模型(和pyqt5\pyside2一样)
盒子模型的组成:内容(content),内边距(padding),边框(border),外边框(margin)
CSS样式
width: 65%;//宽度占65%
margin: 0% 17.5% 0% 17.5%;//上 右 下 左
margin: 0 auto;//由浏览器自动调整
border: 10px solid red; /* 宽度 线条类型 颜色 */
特别注意,外边距是占本盒子所属的父结构的边距,比如margin: 0% 17.5% 0% 17.5%;就是盒子左右各空17.5%的空间,换句话说就是盒子本体的边框距父结构的左\右边框有17.5%的父结构的宽度的距离

表格标签

<table border="1px" cellspacing="0"  width="600px">
	<tr>
		<th>序号</th>
		<th>品牌Logo</th>
		<th>品牌名称</th>
		<th>企业名称</th>
	</tr>
	<tr>
		<td>1</td>
		<td> <img src="img/huawei.jpg" width="100px"> </td>
		<td>华为</td>
		<td>华为技术有限公司</td>
	</tr>
	<tr>
		<td>2</td>
		<td> <img src="img/alibaba.jpg"  width="100px"> </td>
		<td>阿里</td>
		<td>阿里巴巴集团控股有限公司</td>
	</tr>
</table>

<table>//定义表格
<tr>//表格中的行
<th>//表头单元格
<td>//普通单元格

表单标签

采集注册\登录等数据
<form action="" method="post"></form>
action,往何处提交,默认提交到当前页面
method,提交方式,get,url后拼接表单数据(url长度有限).post,在消息体中传递,参数大小无限制

表单项

input
<input type="text" name="name">
type包括text\password\radio(单选框)\checkbox(复选框)\file(上传文件)\date\datetime-local\time\hidden\button\submit
select下拉列表

<select name="degree">
	<option value="1">大专</option>
	<option value="2">本科</option>
</select>

****文本域
<textarea name="description" cols="30" rows="10"></textarea>
post报文可以通过网页->检查->network->请求队列查看