Html5简单笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_18831475/article/details/104767962

Html5简单笔记2传送门

一、单页应用view

1-meta

简介：

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。

以下内容均在<head>下：

定义文档的作者

<meta name="author" content="success">

描述文档的作用

<meta name="description" content="这是学习meta">

跳转到百度

<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

每隔0.5秒刷新一下自己

<meta http-equiv=“refresh” content=“0.5”>
title标签中的内容是会出现在网页的标题部分的

<title>meta标记</title>

2-font

简介：

HTML提供了文本样式标记，用来控制网页中文本的字体、字号和颜色，多种多样的文字效果可以使网页变得更加绚丽。**但是这是一个已经过时的标签 - 字体标签 - 都是会被后面css替代。 **

size属性的范围是从1～7

<font size="7" color="#999">字体</font>

3-文本标签

加粗
```
<b>内容<b>
```
换行

<br>

加粗-语义方面强调
```
<strong>内容</strong>
```
斜体
```
<i>斜体</i>
```
斜体语义
```
<em>内容</em>
```
下划线
```
<u>内容</u>
```
贯穿线，删除线
```
<del>内容</del>
```
下标
```
O<sub>2</sub>
```
上标
```
3<sup>4</sup>
```
©
```
&copy;
```
®
```
&reg;
```
空格
```
&nbsp;
```

4-form表单

servlet中get请求和post请求的区别？

method属性来指定的，默认值就是get action指向我们的控制层的后台的地址

普通文本框

正则表达式 - 限定用户的合法输入
软件开发中，一定是前端校验和后端校验结合使用的
pattern - 正则表达式
只要出现pattern，那么一定要出现required，否则pattern会失效

<input type="text" required placeholder="首字母要小写,总的长度在6-8" 
       pattern="[a-z][a-zA-Z0-9]{5,7}">  <br>

密码框
- [0-9]{5} -> 只能出现5次的纯数字
- [0-9]{5,} -> 至少出现5次的纯数字
- [0-9]{5,7} -> 数字出现的次数是5-7次
- [0-9]? -> 至多1次 - 0次或者1次
- [0-9]* -> 0次或者多次
- [0-9]+ -> 至少1次 - 1次或者多次
- [0-9] 也可以写成\d
```
 <input type="password" required pattern="\d{5}"> <br>
```
数字框

默认的tel不进行正则的认证

<input type="tel" required pattern="1[3|5|7|8|9][0-9]{9}"><br>

邮箱
```
<input type="email" required> <br>
```

数字框

<input type="number" value="10" max="20" min="5" step="2"> <br>

进度条

<input type="range"> <br>

单选按钮

必须要给定name属性

<input type="radio" name="gender">男
<input type="radio" checked name="gender">女  <br>

文件选择框
```
<input type="file"> <br>
```

复选框同一组的需要指定相同属性值的name

hobbies: <input type="checkbox" name="hobbies">睡觉  
		 <input type="checkbox" name="hobbies">玩游戏  <br>

下拉框

<select>
    <option value="">===请选择===</option>
    <option value="">钟楼区</option>
    <option value="">新北区</option>
    <option value="">武进区</option>
</select>

文本域

<textarea cols="30" rows="10"></textarea>  <br>

提交按钮
```
<input type="submit" value="提交">
```
重置按钮

<input type="reset" value="清空">  <br>

普通按钮 - 配合js

<input type="button" value="普通按钮" onclick="test()">
<script>
        function test(){
            alert("我是一个天才！")
        }
</script>

图片提交按钮

<input type="image" src="../imgs/gif-0343.gif">

提交按钮

 <button type="submit">提交按钮</button>

重置按钮

 <button type="reset">重置</button>

普通按钮

<button type="button">普通按钮</button>

5-多媒体

插入音频

<audio controls>
        <source src="horse.ogg" type="audio/ogg">
        <source src="../resources/sounds/萌萌哒天团 - 帝都.mp3"
                type="audio/mpeg">
      </audio>

插入视频

<video width="320" height="240" controls>
        <source src="----视频地址----" 				
                type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
</video>

6-图片标签

图片的大小

banner - 大小要控制在120kb-150kb
正文不能10kb

<img src="../imgs/sb.jpg" alt="图片加载失败" width="100" height="100">

7-块元素和内联元素

块元素: p br hr h1~h6 ul li ol table tr td div

给内联元素黄色背景，给块元素绿色背景

内联元素
- 不会独占一整行，标签体中的内容占多少宽度，那么这个元素就占多少

<font>font1</font><font>font2</font><font>font3</font>

段落标签

块元素 - 会独占一整行

<p>
    p1
</p>
<p>
   p2
</p>
<p>
   p3
</p>

运行结果：

8-列表标记

无序列表

样式■ ■

<ul type="square">学校课程
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
</ul>

样式A. B.

<ol type="A">学校课程
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
</ol>

列表标记是可以嵌套使用

<ul>
	<li>第一阶段
        <ul>
			<li>Java基础</li>
			<li>OOP</li>
			<li>高级特性</li>
        </ul>
	</li>
<ul>

9-标题标记

供搜索引擎来检索的

<h1>first</h1>
<h2>second</h2>
<h3>third</h3>
<h4>four</h4>
<h5>five</h5>
<h6>six</h6>

10-超链接

跳转

<!-- target属性 _self - 在本窗口中打开新的窗口
               _blank - 打开新的窗口 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>

<a href="#">空链接</a>

<a href="javascript:void(0)">空链接</a>

通过超链接触发js

<a href="javascript:test()">单机</a> 
<script>
	function test(){
        confirm("确定删除吗？");
    }
</script>

下载
```
<a href="../imgs/test.doc">下载</a>
```
跳转到自己指定的界面
```
<a href="1-meta.html">meta</a>
```
发送邮箱

 <a href="mailto:849962874@qq.com">发送邮件</a>

11-锚点

点击文字跳转到本页面的指定锚点

<h3>
    //#加锚点id
	<a href="#record">历史回顾3</a>
</h3>
<h3>
	<!-- 作了记号 -->
	<a href="#" id="record">历史回顾3</a>
</h3>

返回到顶部

<center>
	<a href="#top">返回顶部⬆️</a> 
</center>

12-表格

表格最全的写法

<!-- 最全的写法 -->
    <table border="1" width="350">
        <!-- 表格说明 -->
        <caption>
            <h3>学生信息</h3>
        </caption>

        <!-- 表头 -->
        <thead>
            <tr>
                <!-- 表头中的列 - th自带加粗居中的样式 -->
                <th>序号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <!-- 表格的主体内容 -->
        <tbody align="center">
            <tr>
                <!-- 普通列 -->
                <td>1001</td>
                <td>tom</td>
            </tr>
            <tr>
                <!-- 普通列 -->
                <td>1002</td>
                <td>james</td>
            </tr>
        </tbody>
        <!-- 表格的尾部 -->
        <tfoot>
            <tr>
                <td>&nbsp;</td>
                <td></td>
            </tr>
        </tfoot>
</table>

<table border="1" width="350">
           <!-- 虽然省略了tbody但是仍然是存在的 -->
            <!-- 行 -->
            <tr>
                <!-- 表头中的列 - th自带加粗居中的样式 -->
                <th>序号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <!-- 普通列 -->
                <td>1001</td>
                <td>tom</td>
            </tr>
            <tr>
                <!-- 普通列 -->
                <td>1002</td>
                <td>james</td>
            </tr>
            <tr>
                <!-- 普通列 -->
                <td>1003</td>
                <td>gosling</td>
            </tr>    
    </table>

行合并
```
<td rowspan="2">女</td>
```
列合并
```
<td colspan="3">tom</td>
```
表格中是可以插入按钮文本框的
想要改什么的属性，就在那里加入属性
如何控制每行的单元格等距？
- 在单元格第一行的列的单元格上加上宽度

二、样式CSS

注意：

软件开发的原则:高内聚，低耦合(html和css)

行内样式如果出现了和内部样式【相同的样式属性的时候】，那么采取的是就近原则。

行内样式>内部样式跟外部样式
内部样式与外部样式采取就近原则（谁靠近代码，就用谁的）

css语法检测，打包工具 - webpack

在开发中多使用外部样式，行内样式用来微调（所以优先级高），我们实训中采用内部样式，方便调试

1-内部样式CSS

写在头部

<head>下
<style>
    /* 标签选择器 */
    div{
        /* 样式名:样式值 */
        color: red;
        border: 10px dashed #000;
    }
</style>
</head>
//========================
<body>下 
    <div>
        div+css布局
    </div>
</body>

2-行内样式Css

写在行里

<div style="border: 1px solid red;">
        行内样式
</div>

3-外部样式CSS

写在头部，链接到外部的CSS文件中，有CSS样式

<head>
    <link rel="stylesheet" href="../../css/hello.css">
</head>
//=================
<body>
   <div>
       div...
   </div>
</body>

三、选择器

**注意：**行内的写法>id选择器>类选择器>标签选择器

0-标签选择器

css

1-Id选择器

注意：

优先级：行内样式>id选择器 > 标签选择器
id属性的值必须是唯一的

建立=================

<head>
    <style>
        /* id选择器  > 标签选择器 */
        #s1{
            color: red;
        }
        #k1{
            font-size: 30px;
        }
        /* 标签选择器 */
        div{
            color: green;
        }
    </style>
</head>

使用=================

<body>
    <div id="s1">
        div
    </div>
    
    <p id="p1">
        p
    </p>
</body>

2-类class选择器

注意：

优先级：行内的写法>id选择器>类选择器>标签选择器
class属性的值是允许重复的

建立=================

<head>
    <style>
        #cc{
            color:yellow;
        }

        .c1{
            color: red;
        }

        .c2{
            font-size: 50px;
        }

        .c3{
            font-size: 50px;
        }
    </style>
</head>

使用=================

<body>
    <!-- class属性的值是允许重复的 -->
    <div class="c1 c3" id="cc">
        div
    </div>
    
    <p class="c1">
        p
    </p>
    <span class="c2">这是一个非常干净的内联元素</span>
</body>

3-派生选择器

选择id=outer的标签下的所有的span的标签

建立=================

<head>
    <stytle>
        #outer span{
            color: red;
        }
    </stytle>
</head>

使用=================

<div id="outer">
        <span>大儿子</span>
        <p>
            <span>大孙子</span>
            <span>二孙子</span>
        </p>
        <span>二儿子</span>
</div>
//全部会变红

建立=================

<head>
    <stytle>
        #outer span{
            color: red;
        }
    </stytle>
</head>

使用=================

<div id="outer">
        <span>大儿子</span>
        <p>
            <span>大孙子</span>
            <span>二孙子</span>
        </p>
        <span>二儿子</span>
</div>
//一级（最外级）的大儿子、二儿子会变红

紧紧跟随id=outer的标签的span标签

建立=================

<head>
    <stytle>
        #outer+span{
            color: red;
        }
    </stytle>
</head>

使用=================

<div id="outer">
    <span>大儿子</span>
        <p>
            <span>大孙子</span>
            <span>二孙子</span>
        </p>
        <span>二儿子</span>
</div>
<span>亲兄弟</span>
<span>表兄弟</span>
//紧紧跟随id="outer"的<span>亲兄弟</span>变红了

4-组合选择器

建立=================

<head>
	<style>
        div,p{
            color: red;
        } 
    </style>
</head>

使用=================

//div跟p使用上面的样式
<div>div...</div>
<p>p...</p>

全局选择器

*{
	color: red;
}

Html5简单笔记1传送门