目录

什么是HTML

HTML基本标签:

超链接 ：文本或图像

HTML5的媒体元素：

主流浏览器支持的视频格式

主流浏览器支持的音频格式

HTML5的结构元素

什么是CSS  ：层叠样式表（Cascading Style Sheet）

网页中引用CSS样式

字体样式：

div布局元素：

文本样式：

超链接的伪类语法

背景属性

列表

表格定义：

5.2. 背景色&图片（bgcolor & background）

表单的基本结构

CSS高级选择器

什么是HTML

HTML ：超文本标记语言（ Hyper Text Markup Language ）
HTML 不是一种编程语言，而是一种标记语言，描述网页的语言
HTML 使用标签描述网页中图片、文本、音乐、视频、超链接等

HTML基本标签:

标题标签 <h1>~<h6>

段落和换行标签 <p>…</p>、<br/>

水平线标签 <hr/>

斜体 <em>…</em>

字体加粗 <strong>…</strong>

图像标签  常见格式：jpg、gif、bmp、png

<img src="图片路径" alt="替换文本" width="宽度" height="高度" title="鼠标悬停"/>

图片路径有：

绝对路径 -  是指文件在硬盘上真正存在的路径。

例如：‘D:\images/banner.png’

代码演示：<img src="/JavaWebFrom1/web/imgs/yy.png" alt="图片" width="200">

相对路径 - 相对路径就是以当前文件为基准进行一级级目录指向被引用的资源文件

代码演示：<img src="imgs/yy.png" alt="这是一张图片" width="200">

超链接 ：<a href="链接地址" target="目标窗口位置" name= "名称" >文本或图像</a>

链接地址包括：绝对路径 相对路径

target="目标窗口位置"  _self:自身窗口，_blank 新建窗口

超链接的应用：

1、页面间链接：A页到B页，网上常见链接

2、锚链接：跳至自身固定位置，或A页跳到B页固定位置，需锚标记 

用法：先给超链接起一个名称 name="名称"，然后在用另一个超链接#名称；

3、功能性链接：电子邮件、QQ、MSN等链接

注释和特殊符号：

特殊符号

字符实体

示例

空格

&nbsp;

<a href="#">百度</a>&nbsp;|&nbsp;<a href="#">新浪</a>

大于号(>)

&gt;

如果时间&gt;晚上6点，就坐车回家

小于号(<)

&lt;

如果时间&lt;早上7点，就走路去上学

引号(")

&quot;

W3C规范中，HTML的属性值必须用成对的&quot;引起来

版权符号@

&copy;

&copy; 2003-2013北大青鸟

W3C标准 ： World Wide Web Consortium，万维网联盟要求：

标签名称、属性名称必须小写，标签必须严格嵌套

并且必须闭合，即使空元素标签也必须闭合

属性值必须用引号引起来

HTML5的媒体元素：

视频元素：video 

<video src="视频路径"  controls></video> 

controls：提供播放，暂停和音量的控件

autoplay：自动播放 ——<!-- muted 由于浏览器兼容性或者缓存原因，可能无法自动播放使用muted加上autoplay可实现自动播放-->

loop：循环播放

演示代码 自动循环播放视频：

<video muted autoplay  controls loop >
    <source src="video/bdqn.mp4" type="video/mp4"/>
    <source src="video/bdqn.webm" type="video/webm"/>
    <source src="video/bdqn.avi" type="video/webm"/>
</video>

主流浏览器支持的视频格式

IE

Firefox

Opera

Chrome

Safari

Ogg

不支持

3.5+

10.5+

5.0+

不支持

MPEG4

9.0+

不支持

不支持

5.0+

3.0+

WebM

不支持

4.0+

10.6+

6.0+

不支持

音频元素：audio 

<audio src="音频路径" controls="controls"></ audio >

<!-- muted 由于浏览器兼容性或者缓存原因，可能无法自动播放使用muted加上autoplay可实现自动播放-->
<video muted autoplay  controls loop >
    <source src="../video/bdqn.mp4" type="video/mp4"/>
    <source src="../video/bdqn.webm" type="video/webm"/>
    <source src="../video/bdqn.avi" type="video/webm"/>
</video>

主流浏览器支持的音频格式

IE

Firefox

Opera

Chrome

Safari

Ogg

不支持

3.5+

10.5+

3.0+

不支持

MP3

9.0+

不支持

不支持

3.0+

3.0+

WAV

不支持

4.0+

10.6+

不支持

3.0+

 演示案例：

<audio controls>

    <source src="music/music.mp3" type="audio/mpeg"/>

    <source src="music/music.ogg" type="audio/ogg"/>

    你的浏览器不支持audio元素

</audio>

HTML5的结构元素

元素名

描  述

header

标题头部区域的内容（用于页面或页面中的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面的一块区域）

section

Web页面中的一块独立区域

article

独立的文章内容

aside

相关内容或应用（常用于侧边栏）

nav

导航类辅助内容

什么是CSS  ：层叠样式表（Cascading Style Sheet）

标签选择器：p{font-size:16px;color:red;}   代表所有p标签都是这个样式；

类选择器：.second{font-size:20px;color:#096;}  使用方法 <p class="second">;

ID选择器： #third{font-size:24px;color:black;} <p id="third">;

网页中引用CSS样式

内联样式 ：<p style="font-family:verdana;color:red">你好</p>
内部样式表 ：

<html>
    <head>
        <title>网页小说</title>
    </head>
    <style type="text/css">

* {
                margin: 0 auto;
                padding: 0;
            }
            
            #container {
                padding-top:30px;
                width:1300px;
                
            }

</style>
    <body>

    </body>
</html>


外部样式表 :

<link href="style.css" rel="stylesheet" type="text/css" />

href ：文件路径

rel：使用外部样式

type：文件类型

CSS样式优先级

行内样式>内部样式表>外部样式表
ID选择器>类选择器>标签选择器

字体样式：

font-family  ：设置字体类型

font-size: 设置字体大小

font-style:italic ;  设置字体风格 倾斜

font-weight:bolder;  设置字体加粗

以上font-开头的字体样式可以直接简写 font：多项属性值以空格分隔

font : italic bolder 36px "宋体"；

div布局元素：

div元素用于页面的布局，指定某个区域的显示高度和宽度，默认高度为内容的整体高度，宽度为整行。div的宽度和高度都可以单独设置；

div{

        width:300px;   >> 也可以设置百分比 60% 设置百分比会根据窗口的大小来改变！

        height:500px;

}

文本样式：

color  设置文本颜色

text-align 文本水平对齐方式

text-indent  文本首行缩进

line-height  文本行高  默认字体大小是21px，默认外观：靠左对齐 和剧中对齐

text-decoration : underline  添加下划线  overline上划线 none无下滑线

超链接的伪类语法

a{color: blue;text-decoration: none;}  >>设置无下划线 超链接字体颜色。
a:link{color:red} 未单击访问超链接样式
a:visited{color:red} 单击访问后超链接样式
a:hover{color: goldenrod;cursor:wait} 鼠标悬浮其上的超链接样式
a:active{color:red} 鼠标单击未释放的超链接样式 
cursor:wait 代表鼠标放在超链接上的形状圆圈的效果
设置鼠标形状

值

说明

图例

default

默认光标

pointer

超链接的指针

wait

是等待的效果

help

指示可用的帮助

text

指示文本

crosshair

鼠标呈现十字

背景属性

background-colo:#555555; 背景颜色

background-image:url(img/buy.png); 图像路径

background-repeat:no-repeat;   重复方式 不重复

background-position:ceter   背景定位居中，也可以输入像素比如50px -50px;中间以空格隔开，第一个坐标为X第二个为Y坐标；

缩写状态： 

background :background url("../imgs/yy.png") no-repeat center; 
路径前面../代表的是绝对路径比如：JavaWeb/web/imgs/yy.png ;

列表

有序列表：

ol*1>li*3 加tab可以直接打出来一个ol加三个li

<ol>
    <li>夜曲</li>
    <li>青花瓷</li>
    <li>七里香</li>
</ol>

无序列表：

<ul>
    <li>包子</li>
    <li>油条</li>
    <li>辣汤</li>
</ul>

自定义列表：

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>
缩写状态为：
.myo2{ list-style: inside url("../imgs/arrow.png"); }

list-style的默认值为：disc outside none.

属性    描述

list-style-type列表项标记的类型
list-style-position设置列表项标记的位置
list-style-image利用图像替换列表项的标记


list-style-type的值和描述 

值    描述
none    无标记
circle    空心圆
square    实心方块
decimal    数字，1,2,3…
decimal-leading-zero    01, 02, 03…
lower-roman    i, ii, iii, iv, v…
upper-roman    I, II, III, IV, V…
lower-alpha/lower-latin    a,b,c,d,e…
upper-alpha/upper-latin    A,B,C,D,E…
cjk-ideographic    一、二、三…


list-style-position的值和描述

值描述
inside列表项标记在文本以内
outside列表项标记在文本左侧
inherit继承父元素的值

表格定义：

表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。

<table>   
 <tr>       
         <td>单元格内的文字</td>    
 </tr>
</table>

1. <table> </table>是用于定义表格的标签。
2. <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。
3. <td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。
4.字母td指表格数据 ( table data) ， 即数据单元格的内容。

2. 表格的标签
在HTML定义表格的时候，有以下标签供我们使用

NO    表格标签    用处
1    <table>    定义表格，生成的表格在一对<table></table>中；
2    <caption>    定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
3    <thead>    定义表格的页眉
4    <tbody>    定义表格的主体
5    <tfoot>    定义表格的页脚
6    <th>    定义表格的表头，一般是表头中的内容会被加黑；
7    <tr>    定义表格的行
8    <td>    定义表格单元格
9    <col>    定义用于表格列的属性
10    <colgroup>    定义表格列的组
————————————————

3. 单元格边框(border)

表格边框：在使用<table border="1"></table> 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；

<table border="1" width="30%">
    <tr>
        <td>姓名</td>
        <td>班级</td>
        <td>作业完成情况</td>
    </tr>
    <tr>
        <td>王轩</td>
        <td>kgc78</td>
        <td>完成</td>
    </tr>
    <tr>
        <td>张浩然</td>
        <td>kgc78</td>
        <td>完成</td>
    </tr>
    <tr>
        <td>汪林</td>
        <td>kgc78</td>
        <td>完成</td>
    </tr>
    <tr>
        <td>庄文博</td>
        <td>kgc78</td>
        <td>完成</td>
    </tr>
</table>

3.1 表格的细边框样式：

4. 合并单元格

合并单元格时，跨列使用：colspan=“2”； 跨行使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格）

5. 表格格式设置

5.1 单元格的对齐（align）（居中，左对齐，右对齐）

在对应的标签上增加 align 键值对，生效方式为"就近原则"，如下例中，桃花公主单元格为left生效；

align 值leftcenterright
效果左对齐居中右对齐

5.2. 背景色&图片（bgcolor & background）


添加背景色使用：bgcolor
添加背景图片使用：background
5.2.1 单元格背景色&图片
在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；

5.3 单元格的边距（cellpadding）

5.4 单元格间的距离(cellspacing)

5.3 5.4 均可在<table></table>标签使用 cellpadding/cellspacing 即可

5.5 显示部分边框（frame & rules）
可以在<table></table>标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：
frame 键值    效果
void    不显示外侧边框
above    显示上部的外侧边框
below    显示下部的外侧边框
hsides    显示上部和下部的外侧边框
vsides    显示左边和右边的外侧边框
lhs    显示左边的外侧边框
rhs    显示右边的外侧边框
box    在所有四个边上显示外侧边框
border    在所有四个边上显示外侧边框
可以在<table></table>标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：
frame 键值    效果
none    没有线条
groups    位于行组和列组之间的线条
rows    位于行之间的线条
cols    位于列之间的线条
all    位于行和列之间的线条
frame 举例如下：
<table width="600" cellspacing="8" frame="box">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

rules举例如下：
<table width="600" cellspacing="8" rules="cols">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right">男</td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td>女</td>
    </tr>
</table>

表单的基本结构

表单在网页中的应用有哪些？ 注册、登录 个人信息记录         

   method="post" 发送表单数据的方式 常用值：get  | post

   action="result.html" 向何处发送表单数据

表单的元素

属性

说明

type

元素类型：text、password、checkbox、radio、submit、reset、file、image 和 button，默认为 text

size

元素的宽度，当 type 为 text 或 password时

maxlength

type为text 或 password 时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否是被选中


 

表单元素集合：<form method="post" action="receive.html">
            
            readonly只读属性：只能选取，不能修改
            disabled禁用属性：不允许修改、提交
            placeholder提示输性：在文本型的表单元素上提示用户输入的内容
            required必填属性：用户必须在该文本框上输入内容
            maxlength 用户输入的最大长度


          
            type规定元素显示的类型：
            name表单元素的标识
            value表单元素中实际存储的值 <br />
            <hr />
            maxlength仅在文本型表单元素中生效<br />
            min/max仅在数值型表单元素中生效<br />
            
            <hr />
            type="hidden" 隐藏域:隐藏需要提交的内容<br />
            提交用户无法在页面上显示的观察到控件<br />
            <input type="hidden" name="hidden" value="隐藏" />
            <hr />
            
            type="text" 文本:显示明文<br />
            <input type="text" name="username" required placeholder="请输入用户名" maxlength="10" />
            <hr />
            
            type="password" 密码：显示实心圆点<br />
            <input type="password" name="password" value="000000" />
            <hr />
            
            type="radio" 单选：可供选择的空心圆点<br />
            添加name属性，值相同的情况下，才为一组单选能互斥选择<br />
            <input type="radio" name="gender"/>男 <input type="radio" name="gender"/>女 
            <hr />
            
            type="checkbox" 复选：可供选择的空心方块<br />
            添加name属性，值相同的情况下，才为一组多项选择<br />
            <input type="checkbox" name="hobby"/>抽烟<input type="checkbox" name="hobby"/>喝酒<input type="checkbox" name="hobby"/>烫头 
            <hr />
            
             组合<br />
            name标识组合框名称-下拉列表框
            &lt;option&gt;&lt;/option&gt;组合框的每一个选项
            value属性在option标签中实际的值<br />
            <select name="year">
                <option value="一九九零">1990</option>
                <option value="">1991</option>
                <option value="">1992</option>
                <option value="">1993</option>
                <option value="">1994</option>
                <option value="">1995</option>
                <option value="">1996</option>
                <option value="">1997</option>
                <option value="">1998</option>
                <option value="">1999</option>
            </select> 
         
            
            name标识<br />
            rows最小行数<br />
            cols最小列数<br />
            <textarea name="description" rows="10" cols="50"></textarea>
            <hr />
            
            type="file" 文件域：选择需要上传的文件<br />
            name标识文件域名称<br />
            <input type="file" name="file"/>
            <hr />
            
            type="email" 邮箱：让用户输入电子邮箱
            name标识文件域名称<br />
            必须包含@和.<br />
            <input type="email" name="email"/>
       
            
            type="url" 网址：让用户输入网址
            name标识文件域名称
            必须以http://或者https://开头
            <input type="url" name="url"/>
            
            
            type="num" 数字：让用户输入数字
            name标识文件域名称
            min限制最小值
            max限制最大值
            <input type="number" name="number" min="1" max="100"/>
            
            
            type="range" 滑块：让用户拖动的进度条
            name标识文件域名称
            返回一个整数
            min规定最小值
            max规定最大值
            <input type="range" name="range" min="10" max="50"/>
         
            
            type="search" 搜索：让用户输入内容，自带删除x
            name标识文件域名称
            <input type="search" name="search"/>
      
            
            type="submit" 提交按钮：可提交表单
            value为按钮上显示的文本：默认显示"提交"
            <input type="submit" />
         
            
            type="reset" 重置按钮：可回复表单的默认值
            value为按钮上显示的文本：默认显示"重置"
            <input type="reset"/>
         
            
            type="button" 普通按钮：可绑定其他功能
            value为按钮上显示的文本
            <input type="button" value="按钮"/>
            
              type="image"   图片按钮

             <input type="image" src="../imgs/arrow.png">     

             textarea 多行文本域
             cols="x"  显示的列数
             rows="y"显示的行数
             备注：<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea>  
        </form>        

表单语义化

fieldset 可以为表单分组  

legend 给分组起一个名称

案例：

label 标签 比如点击表单中text文本框出现光标，而点击名称则不显示光标，用label关联表单的名称点击名称也可以出现光标 ，给input 起一个id = "male"； label的属性 for ="male" 这样管理了text文本框，这种方式也可以操作其他表单元素；

for 可以绑定input的id  如图所示：

 表单中text文本框

CSS高级选择器

名称

说明

并集选择器

多个选择器通过逗号连接而成，同时声明多个风格相同样式

交集选择器

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

后代选择器

外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔

标签嵌套时，内层的标签成为外层标签的后代

子元素选择器

通过>连接在一起而成，仅作用于子元素

属性选择器

选取带有指定属性的元素，或选取带有指定属性和值的元素

# html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟