南窗木心

Java云同桌学习系列（十三）——前端技术之HTML与CSS

本博客java云同桌学习系列，旨在记录本人学习java的过程，并与大家分享，对于想学习java的同学，可以跟随我的步伐一起学习，我希望这个系列能够鼓励大家一同与我学习java，成为“云同桌”。

每月预计保持更新数量三章起，每章都会从整体框架入手，介绍章节所涉及的重要知识点及相关练习题，并会设置推荐学习时间，每篇博客涉及到的点都会在开篇目录进行总览。（博客中所有高亮部分表示是面试题进阶考点）

前端技术之HTML与CSS

- 1.HTML概述
- 2.HTML基本语法
- 3.HTML标签
- - （1）文本标签
  - （2）格式化标签
  - （3）图片标签
  - （4）超链接标记
  - （5）表格标记
  - （6）表单标签
  - （7）框架标签
  - （8）多媒体标签
- 4.HTML视频播放网站实例练习
- 5.CSS简介
- 6.CSS基础语法
- 7.CSS样式使用方式
- - （1）外部样式
  - （2）内部样式
  - （3）内联样式
  - （4）三种样式实例
- 8.CSS选择器
- - （1）html选择器
  - （2）class类选择器
  - （3）id选择器
  - （4）关联选择器
  - （5）组合选择器
  - （6）伪类选择器
  - （7）关系选择器
  - （8）属性选择器
- 9.CSS常用属性
- - （1）尺寸单位
  - （2）字体属性：font
  - （3）文本属性
  - （4）背景属性
  - （5）边框属性
  - （6）内外补白属性
  - （7）position定位属性
  - 练习：使一个DIV块上下左右居中
  - （8）Layout布局
  - 练习：建立导航栏实例
  - （9）光标属性
- 10.HTML+CSS视频播放网站实例练习

学习时间：一周
学习建议：我们接下来的两个星期主要会学习前端的几个基础的技术，因为现在对java开发的要求越来越高，较好的前端水平才能更好的将后端的核心技术展现出来。

HTML与CSS的各方面比较繁杂，学习过程中应多去以下网站查看详细的介绍，并且必须要多去敲代码查看效果，才能将各属性融会贯通。
菜鸟编程
W3cchool在线教程

1.HTML概述

HTML（HyperText Mark-up Language）：一种用来描述网页的超文本标记语言

经过多年的发展，HTML系列主要的语言有：HTML、XHTML、HTML5，目前市场主流为HTML5

HTML内容编写完毕后，需要提交到浏览器，浏览器根据文档中规定的标准和标签描述内容将内容渲染成网页不同文档类型的设定通过设置(以下分别是HTML、XHTML、HTML5的文档类型设定)

2.HTML基本语法

HTML文本主要分为两个部分，头部（head）和主体（body），head部分负责设置网页的整体的一些属性信息不显示东西，body负责网页显示的具体内容

标签中可以像xml一样添加相关属性
HTML文件后缀名为.html或.htm
HTML中也可以插入注释


<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>⽹页标题 title>
        
    head>
    
    <body>
        ⽹页显示内容
         
    body>
    
html>

3.HTML标签

HTML中通过若干的不同种类的标签来描述网页内容，包括超链接，图片、视频资源等

HTML标签（标记）的语法是由 < 和 > 括起来。
HTML标签有两种：双标签： <标签名>… 和单标签： <标签名 />
HTML标签中还可以添加属性： <标签名属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器器不会报错，会尽量解析，或者不显示。

此处推荐一个HTML的学习网站，里面标签的介绍更加的全面丰富和严谨HTML参考手册

（1）文本标签

（2）格式化标签

（3）图片标签

（4）超链接标记

（5）表格标记

（6）表单标签

HTML中表单可以让用户输入信息，收集用户数据

(1)  ...  表单标签

(2)    表单项标签input定义输⼊入字段，⽤用户可在其中输⼊入数据。在  HTML 5 中，type 属性有很多新的值。

form标签常⽤用属性：
  action属性:提交的⽬目标地址 (URL)
  method属性:提交⽅方式 :get(默认)和post
	    get⽅方式是 URL地址栏可见 ,长度受限制 (IE2k ⽕火狐 8k),相对不安全 .
	    post⽅方式是 URL地址不可见 ,长度不受限制 ,相对安全.
  enctype:提交类型
  target: 在何处打开⽬目标  URL。
  name:属性为表单起个名字.在HTML5中使⽤用  id 代替。

HTML5中新增的input类型：

 (3)    标签创建下拉列列表。
		    下拉选择项标签,⽤用于嵌⼊入到 ...  多⾏行行的⽂文本输⼊入区域
 (5)    标签定义按钮。
 (6)    -- 元素可将表单内的相关元素分组。
 (7)    -- 标签为   、   以及    元素定义标题。

<form>
  <fieldset>
  <legend>个⼈人信息： legend>
  姓名：<input type="text" /><br/>
  年年龄： <input type="text" /><br/>
  fieldset>
  <br/><br/>
  <fieldset>
  <legend>健康信息：legend>
  身⾼高： <input type="text" /><br/>
  体重：<input type="text" /><br/>
  fieldset>
form>

效果图：

(8)    html5标签--   标签定义选项组。此元素允许您组合选项
(9)    html5标签--   标签定义可选数据的列列表。与  input 元素配合使⽤用，就可以制作出输⼊入值的下拉列列表。

（7）框架标签

框架标签可以设置可替换的一块内容，可以将标签作为超链接的target属性，点击不同超链接切换框架显示

属性：src：规定在 iframe 中显示的文档的  URL
  name：规定 iframe 的名称
  height：规定 iframe 的高度。
  width：定义 iframe 的宽度。
  frameborder：规定是否显示框架周围的边框。

例如：

 <iframe src="1.html" name="myframe" width="700" height="500">iframe>

（8）多媒体标签

（1） 音频标签
（2） 视频标签
通过其中的标签的属性来制定资源的路径

4.HTML视频播放网站实例练习

所有视频以图片列表的形式显示，当用户点击图片的视频，可以在页面下方播放指定的电影。

（由于上传文件限制，读者在复制后运行时替换相关图片和视频资源即可正常运行）

主html文件：


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>南窗木心视频播放网站title>
head>

<body>
	<h1> 欢迎来到南窗木心的视频播放网站h1>
    <hr>hr>
    
    <p>请点击下方图片选择您想要观看的视频 p>
<p> p>


    <fieldset> 
    	<legend> 新手必学动作之正蛇legend>
         
        <a href="detail1.html"   target="myframe" > <img src="source/detail1.PNG" width="300" height="200"/> a>
        <a href="detail2.html"   target="myframe" > <img src="source/detail2.PNG" width="300" height="200"/> a>
        <a href="detail3.html"   target="myframe" > <img src="source/detail3.PNG" width="300" height="200"/> a>
        
    fieldset>
    
    
    <iframe src="detail1.html" name="myframe"  width="600" height="400">iframe>
    
    
    
    
body>
html>

detail1.html文件：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vedio_detail1title>
head>

<body>
	<h1> 正蛇细节一 h1>
	<i>第一步，大家可以先练习一下，前后脚位于一条线的滑行感觉
	注意要像视频中一样，将后面的脚相较于前面的脚更加弯曲一点
	i>
    
    <video controls="controls" width="500" height="500">
  		<source src="./source/detail1.mp4" type="video/mp4" />
  		您的浏览器不支持播放视频
	video> 


body>
html>

detail2.html文件：


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vedio_detail2title>
head>

<body>
	<h1> 正蛇细节二 h1>
	
	<u>第二步，因为大多数初学者身体比较僵硬，找不到向前滑行的动力
	所以大家在练习正蛇之前,可以先复习一下双鱼
	u>
	
	<ol start="1">
	<li>将两只手臂举起，跟随腰部整体左右扭动
	<li>带动双脚一起发力向前蛇形绕桩
	<li>记住腰部扭动的感觉
	<li>将前后脚分开就可以很快学会正蛇 
	ol>
    
    <video controls="controls" width="500" height="500">
  		<source src="./source/detail2.mp4" type="video/mp4" />
  		您的浏览器不支持播放视频
	video> 


body>
html>

detail3.html文件：


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vedio_detail3title>
head>

<body>
	<h1> 正蛇细节三 h1>
	
	第三步，我们学习一下正蛇如何起步
	<b>初学者可以先双脚并立,站在第一个桩的左侧b>

	<ul>
		<li>腰部先扭动发力，两脚自然分开
		<li>右脚先走，左脚跟随着右脚轨迹行动
		<li>过桩时注意双脚不同的压韧方向
	ul>
	
	依次循环以上步骤，多加练习
	便可轻松掌握正蛇
    
    <video controls="controls" width="500" height="500">
  		<source src="./source/detail3.mp4" type="video/mp4" />
  		您的浏览器不支持播放视频
	video> 


body>
html>

效果图：

5.CSS简介

CSS（层叠样式表，Cascading Style Sheets)：是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

作用：

极大地提高工作效率
对HTML进行美化，控制如何显示HTML元素
多个样式可以层叠

许多CSS的详细用法，我个人建议上网搜索一下对应版本的手册或者网站菜鸟教程CSS来进行全面细致的了解，当然如果不需要太细致，那么这篇博客就够了

6.CSS基础语法

CSS的语法格式：

格式： 选择器 {属性:值;属性:值;属性:值;....}

后续会逐渐介绍常用的选择器和属性

p{
  color:red;
  text-align:center;
}

CSS的注释：

/* ...........................*/

7.CSS样式使用方式

样式层叠优先级（从低到高）：

浏览器缺省设置
外部样式表（使用link导入）
内部样式表（在head里进行设置）
内联样式表（在HTML元素内部设置）

优先级可以按就近原则理解，在层叠使用时，操作同一选择器的同一属性，高优先级会覆盖低优先级样式

（1）外部样式

写在标签中的第一个样式，导入已经写好的CSS文件，作用于本页面，是最常使用的CSS样式方式

书写位置，标签内

<link href="引入的CSS文件" type="text/css" rel="stylesheet"/>

或者

<style type="text/css">
  @import "style.css";
style>

（2）内部样式

写在标签内的第二个样式，只能使用