您的位置：首页 > Web前端 > CSS

JavaWeb之HTML与CSS基础学习与总结

2019-08-09 00:23 567 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/LINHONG_1994/article/details/98884497

笔记大纲

  • 网页的组成
  • HTML简介
  • HTMT文件结构
  • HTMT标签语法
  • HTMT常用标签
  • HTML中的表格和表单
  • CSS的简单样式
1.网页的组成

  业界认为“HTMT是名词，CSS是形容词、JS是动词”,我觉得非常形象，日常拿图：

  HTML【结构】:是网页内容的载体。如：网页信息包括了文字、图片等。

  CSS:【表现】即是样式，是网页内容的表现。<美化、装修>如：网页指定什么背景颜色，表框大小是多少。

  JavaScript、jQuery【行为】：是实现网页上的特效效果。如：图片的轮换（动图），进行交互操作。
   一个良好的网页具备结构、表现、行为解耦。

2.HTML简介

   ①HTML是网页语言；

   ②HTML是超文本标记语言（Hyper Text Markup Lanuage）;

   ③HTML不是编程语言，只是一种标记语言（标记标签：用来描述网页）。

  说明： HTML编写就直接用浏览器运行，不需要编译,各大浏览器都有内置的html引擎。

3.HTMT文件结构

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--这是我的第一个html页面！-->
<body>
这是我的第一个html页面！
</body>
</html>

说明：

A.在HTM页面中，<html></html>是根标签，即所有的HTML标签都在其中；

B.在HTM页面中，<head>标签用于定义文档的头部，相当于一个容器,容器中常见头部元素有<title>、<script>、<style>、<link>、<meta>等；

C.在HTM页面中，<body></body>标签间的内容是网页的主要内容,比如<h1>、<p>、<a>、<img>等；

D.在HTM页面中,<!-- -->即为注释。
4.HTMT标签语法
A.标签由英文尖括号"<>"表示，如：<html>;

B.HTML的标签一般都是成对出现的，分为开始、结束标签。结束标签比开始标签多一个反斜杠“/”。如：<body></body>；

C.HTML的标签分为两类,一类是成对标签，一类是自结束标签，如换行标签：<br/>
D.HTML的标签不区分大小写，通过浏览器引擎解析后的html代码，均为小写。

说明：  F12 /F12+FN键 在浏览器页面进行控制台，可以查看网页的一些请求与响应的参数， 作为开发人员常关注的三个参数是：Elements:浏览器解析后的源码  、 Soures源码    、NetWork监听  。
浏览器一般选择谷歌和火狐，利器必备系列！</font>

E.标签间可以嵌套，但是顺序必须保持一致，如果交叉嵌套，不会报错，浏览器引擎自动补全代码（浏览器有一定的容错能力）
如：<div><p>关注博客：https://coding0110lin.blog.csdn.net/</p></div>

注意：注释不能嵌套！

F.标签要正确关闭，如没正确关闭，浏览器引擎自动补全代码 。
G.属性一定要有值，但是值必须要有引号 。
5.HTMT常用标签

[1]标题标签

<h1 >...</h1> <h2 >...</h2> <h13>...</h3> <h4 >...</h4> <h5 >...</h5><h6>...</h6>

   特点：字体加粗、字号大小从h1到h6递减, 自带换两行的效果。

[2]换行标签 （常用两种）

<br/>

[3]div标签

<div>...</div>

   特点： div标签无实际语义，主要作用是为了分区与布局,类似一个容器,自带换行效果

[4]转义字符

以“&”开始，以";"结束 普通空格&nbsp;字符空格&emsp; 大于号:&gt;小于号：&lt;版权号：&copy;

[5]段落标签

<p>...</p>

  表示段落，默认换2行

[6]无序列表

<ul><li>....</li></ul>   type:disc(实心圆)、circle(空心圆)、square(实心圆)

    自带换行效果

[7]有序列表

<ol><li>....</oi></ul>  A | a | i | I |1

[8]图片标签

<img alt="" src="" title="">

  A.src:.引入图片的路径
  B.alt:引入图 片有误时的提示文本信息
  C. title:鼠标移入（悬停）时的提示文本
  不自带换行效果！
  【路径问题】说明：看目标文件与当前文件的位置关系，当前文件与目标文件在同一个包下，此时直接引用当前文件与目标文件不在同一个包下，先找目标文件的父包，再找目标文件。 使用 “…/“返回上一个目录(n个，依情况而定)。如src=”…/img/coding0110lin.jpg”。

[9]超链接

<a href="" target="">

  语法： 使用a标签制作链接, href:链接的路径, target: 目标链接以何种方式打开:
      A._self：以当前选项卡（页面）打开
      B._blank：以新的的选项卡（页面）打开

  作用： 链接到目标路径

6.HTML中的表格和表单

⑴表格：

A.使用<table></table>制作表格

B.使用tr制作行

C.使用th(表头)|td制作单元格

自带换行效果！

 说明：跨行rowspan、 跨列colspan、border边框、width宽、height高、align水平对齐 。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body align="center">
<h1>四行五列的表格</h1>
<table border="1" width="300px" height="300px" align="center">
<tr align="center">
<td>11</td>
<td rowspan="2">12,22</td>
<td>13</td>
<td>14</td>
<td>15</td>

</tr>
<tr align="center">
<td>21</td>
<!-- <td>22</td> -->
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr align="center">
<td>31</td>
<td colspan="2">32,33</td>
<!-- 	<td>33</td> -->
<td>34</td>
<td>35</td>
</tr>
<tr align="center">
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
</table>
</body>
</html>

输出效果：

⑵表单

A.使用<form></form>制作表格

B.使用input标签制作表单项

[1]type：表单项的类型：

text、password、radio、checkbox、reset、submit、file（文件域）、hidden(隐藏域)

[2]name：表单项名称，如果需要将表单项提交到目标路径【get提交方式的地址上】，必须使用name属性

[3]value：设置表单项值,对于【按钮】alue属性作用即是显示的文本

[4]checked:设置单选框&复选框【默认选中】的状态

[5]selected：设置下拉框选中的默认状态

C.使用select option标签制作表单项<select><option></option></select>

D.表单的属性：

[1]action:提交表单、目标路径（进行页面等跳转）

[2]method:提交方式  ，get(默认)：相对不安全，post:相对安全

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<h4>博客：https://coding0110lin.blog.csdn.net/</h4>
<form action="success.html" method="post">
用户名：<input type="text" name="username"><br/><br/>密&emsp;码：<input type="password" name="password"/><br/><br/>性&emsp;别：<input type="radio" name="gender" value="man" checked="checked">男
<input type="radio" name="gender" value="women">女<br/><br/>爱&emsp;好：<input type="checkbox" name="hobby" value="Program" checked="checked"/> 编程
<input type="checkbox" name="hobby" value="reading" checked="checked"/> 读书
<input type="checkbox" name="hobby" value="travel" checked="checked"/> 旅游
<br/><br/>技&emsp;能:<select name="skill">
<option value="Java">Java</option>
<option value="MySQL">MySQL</option>
<option value="Linux">Linux</option>
</select>
<br/><br/><input type="reset" value="重置">
<input type="submit" value="提交"/>

</form>
</body>
</html>

输出效果：

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<div align="center">
<h2>登录界面</h2>
<form action="success.html" >
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" value="lindaxia"></td>

</tr>
<tr>
<td>密&emsp;码:</td>
<td><input type="password" name="password" value="20190808"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="reset" value="重置">&emsp;&emsp;
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

输出效果：

7.CSS的简单样式

CSS简称：层叠样式表（Cascading Style Sheets）,作用是美化页面。

(1)CSS基本语法

选择符（选择器）以及声明

p{属性：属性值;属性2：属性值2；}   属性间用分号隔开！

(2)常见的CSS选择器

①标签选择器
  如：p{}、h2{}、div{}

p{属性：属性值;属性2：属性值2；}

②类选择器

定义：.类名{属性：属性值;属性2：属性值2；}

调用： <p class="类名">http://coding0110lin.blog.csdn.net</p>

③ID选择器

定义：#id名{属性：属性值;属性2：属性值2；}

调用： <p id ="id调用">http://coding0110lin.blog.csdn.net</p>

优先级：ID选择器>类选择器>标签选择器

☛CSS嵌入方式

A.行内样式表：书写在style属性中    如：<p style="0000FF;"></P>

B.内部样式表：书写在<style>标签中

如：<style>
div{color="0000ff;"}
</style>

<div></div>

C.外部样式表：书写xxx.css文件中

引入外部样式表：<link href=-"样式路径" rel="stylesheet"> <!--stylesheet是引入关系-->

优先级：行内>内部>外部（就近原则）

代码示例：
CSS选择器测试html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器测试</title>
<style type="text/css"> <!--内部样式表 -->

</style>
<link href="test.css" rel="stylesheet"> <!--外部样式表 -->
</head>
<body>
<div align="center">
<h2>你知道吗？</h2>
<p class="test_color">表白-520</p>
<p>自从那次不经意间把你导入我的心。</p>
<p id="font_size">就从此再也无法导出了。</p>
<p>真的希望从此你便是我私有的。</p>
<p>别人无论如何也无法访问你的心。</p>
<p>不过你放心，我会精心的保护它。</p>
<p>我能抽象出整个世界。</p>
<!--行内样式表  优先级：行内>内部>外部（就近原则） -->
<p style="color:green;" class="test_color">但是我不能抽象你。</p>
<p class="test_color">因为你在我心中是那么的具体。</p>
</div>
</body>
</html>

样式css文件

@charset "UTF-8";
.test_color{color:red}<!--类选择器 调用： <p class="类名"></p>-->
#font_size{<!--id选择器 调用： <p id ="id调用"></p>-->
font-size: 24px;
}

输出效果：

(3)CSS颜色

可用以下方法来规定 CSS 中的颜色：(常用十六进制色和RGB颜色)
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器颜色名

文档参考：

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS中的颜色</title>
<style type="text/css">
p{
color:rgb(0,255,0);<!-- 标签选择器   绿 -->
}
.fontcolor{
color:rgb(255,0,0); <!--类选择器    红 -->
}
#font_color{
color:rgb(0,0,255);<!--ID选择器   蓝-->
}
</style>
</head>
<body>
<!-- 输出结果是 蓝色的“光学三原色”字体，ID选择器优先级高-->
<p  id="font_color" class="f_c">(RGB)光学三原色</p>
</body>
</html>

 ☝上述分享来源个人总结，如果分享对您有帮忙，希望您积极转载；如果您有不同的见解，希望您积极留言，让我们一起探讨，您的鼓励将是我前进道路上一份助力，非常感谢！我会不定时更新相关技术动态，同时我也会不断完善自己，提升技术，希望与君同成长同进步！

☞本人博客：https://coding0110lin.blog.csdn.net/  欢迎转载，一起技术交流吧！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航