【JavaWeb】前端基础
JavaWeb前端三大件：HTML（重要用于网页主体结构的搭建），CSS（页面美化），JavaScript（重要用于页面元素的动态代理）
1. HTML
1.1 html概述
HTML：Hyper Text Markup Language超文本标记语言。
html是表明型语言，不是编译型语言。浏览器是容错的。
标签是通过一组尖括号+标签名的方式来界说的。标签有单标签和多标签。
标签体：开始标签…结束标签
html文件是浏览器负责剖析和展示的。
浏览器通过网络访问服务器上的html文件（向服务器发送请求），服务器将html文件以相应的形式发送给浏览器。浏览器剖析文件。
1.2 html代码结构
代码的基础结构：
[*] html根标签：<html> </html>
[*] html跟标签下有两个一级标签：
<head> </head>头标签署义不直接展示在页面主题上，但是有很紧张的内容，如：字符集，css引入，js引入，其他。
<body> </body>界说要展示到页面主题的标签。
html文档的声明：<!DOCTYPE html>
1.3 专业词汇
[*] 标签 tag：一对<>
[*] 属性 attribute：一般写在开始标签中
[*] 文本 text：开始标签和结束标签中的内容
[*] 元素 element：开始标签+属性+文本+结束标签 称之为一个元素
1.4 通用语法
[*] 根标签有且只能有一个
[*] 无论是双标签还是单标签都需要精确关闭
[*] 标签可以嵌套但不能交织嵌套
[*] 表明语法为 ,留意不能嵌套
[*] 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
[*] HTML中不严酷区分字符串使用单双引号
[*] HTML标签不严酷区分大小写,但是不能大小写混用
[*] HTML中不答应自界说标签名,强行自界说则无效
1.5 HTML基础标签
<html>
<head>
<title> 这是我的第一个网页 </title>
<!-- <meta charset="GBK" /> -->
</head>
<body>
hello world!! <br/>
这是我的第一个网页
<p> 这是一个段落 </p>
<p> 这是第二个段落 </p>
<img src = "imgs/test.jpg" width="510" height="660" alt = "这里是一张图片" />
<h1> 标题1 </h1>
武林高手排行榜：
<ol type = "I" start = "3">
<li>扫地僧</li>
<li>萧远山</li>
<li>阿紫</li>
</ol>
人员名单
<ul type = "circle">
<li>乔峰</li>
<li>石头</li>
<li>沙子</li>
</ul>
你<b>好</b><i>呀</i><u>你好</u> <br/ >
H<sub>2</sub>O <br/>
3<sup>2</sup> = 9
5<10
10>5
<span></span>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
<!--
html页面中由一对标签组成：<html> </html>
<html> 开始标签
</html> 结束标签
title表示网页的标题
可以在meta标签中设置编码方式
<br/> 表示换行 br标签是一个单标签，开始标签和结束标签是同一个。斜杠放在单词后面。
p表示段落标签
img表示图片标签
列表标签 ol有序列表 type显示的类型: A a I i 1 start 表示从*开始
ul type 显示的样式
u表示下划线 b表示粗体 i表示斜体
sub下标
sup上标
html中的实体：
< (less than)小于
> (greater than)大于
≤ (less equal)小于等于
≥ (greater equal)大于等于
span 不换行的块标记
a表示超链接
href地址
target
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
div层
-->
[*] html页面由一对标签组成<html></html> <html>开始标签 </html>结束标签
[*] <title> </title> 网站的标题
[*] <meta>中可设置编码方式
[*] <br/> 表示换行，br标签是一个单标签，开始标签和结束标签是同一个，斜杠放在单词后面。
[*] <p> </p>段落标签
[*] <img src = " " />图片标签，其中src可以填入图片的相对路径或绝对路径
[*] <ol> </ol>有序列表标签。type表现的类型: A a I i 1 start 表示从*开始。<li>填入内容</li>
[*] <ul> </ul>无序列表。type表现的样式
[*] <b> </b>粗体，<u> </u>下划线，<i> </i>斜体
[*] <sub> </sub>下标
[*] <sup> </sup>上标
[*] html中的实体：
< (less than)小于
> (greater than)大于
≤ (less equal)小于等于
≥ (greater equal)大于等于
[*] <span> </span>不换行的块标记
[*] <a> </a>超链接
href地址
target
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
[*] <div> </div>层
[*] 表格
<html>
<title>
表格
</title>
<body>
<table border = "1" width="600" cellspacing="0" cellpadding="4">
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>张三</td>
<td>100</td>
</tr>
</table>
<hr/>
<table border = "1" width="600" cellspacing= "0" cellpadding="4">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td>删除</td>
</tr>
<tr align="center">
<td>香蕉</td>
<td>20</td>
<td>100</td>
<td>删除</td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td>删除</td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">300</td>
</tr>
</table>
</body>
</html>
<!--
table中有如下属性
border 表格边框的粗细
width 表格的宽度
cellspacing 单元格间距
cellpadding 单元格填充
-->
[*] 表单
https://i-blog.csdnimg.cn/img_convert/26675b789fb1a54520e1c4cbbc58aca6.png
name属性值保持划一,这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox"表示复选框。name属性值建议保持划一,这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。每一个选项是option,其中value属性是发送给服务器的值,selected表示默认选中的项
textarea 表示多行文本框(大概称之为文本域),它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset"表示重置按钮
input type="button"表示普通按钮
1.6 表单标签
表单标签，可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据重要的方式之一。
[*]form标签，其内部用于界说可以让用户输入信息的表单项标签
[*]action，form的属性之一，用于界说信息提交的服务器的所在
[*]method，属性之一，用于界说信息的提交方式
[*]get方式：参数会以键值对形式放在url后 以name为key，以value为值举行提交。所以若想提交至服务器，留意设置name和value！！！value基于文本的(type = “text” 或 type = “password”)可以不输入，但是别的必须输入(如单选框，复选框等)。
[*]post方式
[*]input标签，重要的表单项标签，可以用于界说表单项
[*]name，input的属性之一，用于界说提交的参数名
[*]type，input标签的属性之一，用于界说表单项类型（输入信息的表单项类型）
单选框：<input type = "radio">name一样才会有互斥效果，并且留意写value属性。
复选框：
爱好：<input type = "checkbox" name = "hobby" value = "1"> 篮球
<input type = "checkbox" name = "hobby" value = "2"> 足球 <br/>
隐藏域：盼望提交一些特定的信息，但是安全思量，大概是用户操作题目，不盼望该数据发生改变。
<input type = "hidden" name = "id" value = "123">
<input type = "text" name = "pid" value = "456" readonly>
<input type = "text" name = "pid" value = "456" disable>
readonly只读，提交时携带
disable不可用，提交时不携带
文本域textarea个人简介：<textarea name = "self"> </textarea> <br/>
下拉框select：
籍贯：<select name = "pro">
<option value = "1">京</option>
<option>津</option>
<option>冀</option>
<option selected> --请选择-- </option>
</select>
提交文件：
上传头像：<input type = "file">
1.7 结构标签
<div> </div>
2. css
2.1 css语法
[*]为什么需要css
[*]css的分类：标签样式表，类样式表，ID样式表
[*]css从位置上的分类：嵌入式样式表，内部样式表，外部样式表
[*]嵌入式样式表：即将style写在标签<>里面。
[*]内部样式表：将style写在<head> </head>中。
[*]外部样式表：将css内容写在新文件中。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]