HTML 略解

HTML&CSS 略解

HTML

什么是HTML

  • HTML 是一门语言，所有的网页都是由 HTML 这门语言编写的

  • HTML ( HyperText Markup Language ): 超文本标记语言

    • 超文本： 超越了文本限制，比普通文本更强大，除了文字信息还可定义图片，音频，视频等内容
    • 标记语言：由标签构成的语言

  • HTML 运行在浏览器上，HTML 标签由浏览器来解析

  • W3C 标准：网页主要由三部分构成

    • 结构：HTML

    • 表现：CSS

    • 行为：JavaScript

基础标签

html 标签不区分大小写，语法松散，小的语法错误不影响显示。

  • html 根标签，用于浏览器识别 HTML 文档
  • head 头标签，定义关于文档的信息
  • body 标签，网页主体内容展示
  • title 标签, 网页标题（浏览器标签栏显示）
1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <title>
            html 快速入门
        </title>
    </head>
    <body>
        乾坤未定，你我皆是黑马！
    </body>
</html>
  • font 标签 设置文字颜色
1
<font color = "red"> 乾坤未定，你我皆是黑马！</font>

  • h1-h6 标签,定义标题，h1 最大，h6 最小

    1
    2
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    标签 描述
    <b> 文本加粗
    <i> 文本斜体
    <u> 文本下划线
    <center> 文本居中（已弃用）
    <p> 定义段落
    <br> 定义折行( html 不识别换行符，需手动添加此标签换行)
    <hr> 定义水平线
    <font> 文本字体，字体尺寸，字体颜色（已弃用）

图片 音频 视频

  • <img> 定义图片
    • src规定显示图像的 URL (同一资源定位符)
    • height 定义图像高度
    • width 定义图像宽度
  • <audio> 定义音频，支持的音频格式：MP3、WAV、OGG
    • src 规定音频的 URL
    • controls 显示播放控件
  • <video> 定义视频，支持的视频格式：MP4、WebM、OGG
    • src 规定视频的 URL
    • controls 显示播放控件

超链接

<a> 定义超链接，用于链接到另一个资源

  • herf 指定打开文件的 URL
  • target 指定打开文件的方式
    • _self : 默认值，在当前页面打开
    • _blank : 在空白页面打开

列表标签

标签 描述
<ol> 有序列表
<ul> 无序列表
<li> 列表项 
1
2
3
4
5
6
7
8
9
10
<ol>
    <li>牛奶</li>
    <li>咖啡</li>
    <li>茶</li>
</ol>
<ul>
    <li>牛奶</li>
    <li>咖啡</li>
    <li>茶</li>
</ul>

表格标签

  • <table> 定义表格

    • border : 规定表格边框的宽度
    • width : 规定表格的宽度
    • cellspacing : 规定单元格之间的空白

  • <tr> 定义表格行

    • align : 规定表格行的对齐方式

  • <td> 定义单元格

    • rowspan : 规定单元格可跨越的行数
    • colspan : 规定单元格可跨越的列数

  • <th> 定义表格头部

布局标签

  • <div> 定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
  • <span> 用于组合行内元素

表单标签

常见于登录注册等窗口

  • 表单：在网页中主要负责数据采集功能，使用<form> 标签定义表单
  • 表单项（元素）：不同类型的 input 元素，下拉列表、文本域等
标签 描述
<form> 定义表单
<input> 定义表单项，通过 type 属性控制输入形式
<label> 为表单项定义标注
<select> 定义下拉列表
<option> 定义下拉列表项
<textarea> 定义文本域
  • <form> 定义表单
    • action 属性：规定表单提交时向何处提交表单 URL
    • method 属性：规定表单提交的方式；get | post
1
2
3
4
<form action="#" method="get">
    <input type="text" name="username">
    <input type="submit">
</form>

type 类型

type 取值 描述
text 定义单行输入字段，默认值
password 定义密码输入，不回显示明文
radio 定义单选按钮
checkbox 定义复选框
file 定义文件上传按钮
hidden 定义隐藏字段，该字段对用户不显示但会随表单提交到服务器
submit 定义提交按钮，点击会将表单提交到服务器
reset 清空表单
button 定义可点击按钮 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="#" method="post">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>
    <label>性别：</label>
    <input type="radio" name="gender" id="male" value="1"><label for="male">男</label>
    <input type="radio" name="gender" id="female" value="2"><label for="female">女</label>
    <br>
    爱好：
    <input type="checkbox" name="hobby" id="hobby1" value="1"><label for="hobby1" >旅游</label>
    <input type="checkbox" name="hobby" id="hobby2" value="2"><label for="hobby2" >电影</label>
    <input type="checkbox" name="hobby" id="hobby3" value="3"><label for="hobby3" >游戏</label>
    <br>
    头像:
    <input type="file"><br>
    <label for="city">城市</label>
    <select name="city" id="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select><br>
    <label for="description">个人描述: </label>
    <textarea cols="20" rows="5" id="description" anme="description"></textarea>
    <br>
    <input type="hidden" name="id" value="123">
    <input type="submit" value="登录"><br>
    <input type="reset" value="重置"><br>
    <input type="button" value="button"><br>
</form>

CSS

  • CSS 是一门语言，用于控制网页表现
  • CSS ( Cascading Style Sheet ) 层叠样式表

CSS 导入方式

  1. 内联样式： 通过 HTML 标签中的 style 属性控制

    1
    <div style="color: red">Hello CSS</div>

  2. 内部样式：定义<style> 标签，在标签内部定义

    1
    2
    3
    4
    5
    6
    <div>内部样式</div>
    <style type="text/css">
    div{
    color: aqua;
    }
    </style>

  3. 外部样式：定义 <link> 标签,引入 CSS 文件

    1
    2
    <!--.html-->
    <link rel="stylesheet" href="demo.css">
    1
    2
    3
    4
    /*.css*/
    div{
        color: rebeccapurple;
    }

优先级：内联样式 > 内部样式 > 外部样式

CSS选择器

1
<div id="name" class = "cls">hello css</div>

  • 元素选择器：元素名称{color: red;}

    1
    div{color: red;}

  • id 选择器：#id 属性值{color: red;}

    1
    #name{color: red;}

  • 类选择器 .class属性值{ color: red;}

    1
    .cls{color: red;}

优先级： id 选择器 > 类选择器 > 元素选择器

CSS属性

java 后端 > java web
#Web #HTML
HTML 略解
http://mrzzzz1.github.io/2023/03/09/HTML/
作者
Mrzzzz1
更新于
2023年3月22日
许可协议