html5+css学习笔记上篇

尾生抱柱-
已于 2022-10-03 18:05:58 修改
阅读量219
点赞数
文章标签：前端
于 2022-10-03 18:03:53 首次发布
本文链接：https://blog.csdn.net/weixin_52623964/article/details/127154539
版权
1.标签部分
块级标签：独占一行，能设置宽高
<h1></h1>:标题标签

<div></div>：常用的文本标签

<p></p>：段落标签

<br>：换行标签

<ul>
    <li></li>
</ul>：常用的嵌套标签

行内标签：不能设置宽高，共享一行
<img src="" alt="">：传入图片标签

<span></span>：文本标签

<strong></strong>：文本加粗

<em></em>：强调文本内容，斜体显示

<a href=""></a>:点击跳转相对于的页面

<pre></pre>:一般用于展示代码
<code></code>：一般用于展示代码文本

转为行内标签：display:link,
转为块级标签：display:block,
转为行内块标签：display:link-block


2.页面布局基本结构
<!-- 头部 -->
<header>
    <nav>
        <a href="">标题1</a>
        <a href="">标题2</a>
        <a href="">标题3</a>
        <a href="">标题4</a>
    </nav>
</header>
<!-- 内容 -->
<main>
    <section>
        <h3>内容标题</h3>
        <article>内容1</article>
        <article>内容2</article>
        <article>内容3</article>
        <article>内容4</article>
    </section>
    <section>
        <h3>内容标题</h3>
        <article>内容1</article>
        <article>内容2</article>
        <article>内容3</article>
        <article>内容4</article>
    </section>
    <section>
        <h3>内容标题</h3>
        <article>内容1</article>
        <article>内容2</article>
        <article>内容3</article>
        <article>内容4</article>
    </section>
    <section>
        <h3>内容标题</h3>
        <article>内容1</article>
        <article>内容2</article>
        <article>内容3</article>
        <article>内容4</article>
    </section>
</main>
<!-- 底部 -->
<footer>
    <div>我是底部内容</div>
</footer>
3.符号
小于号：&lt
大于号：&gt
空格：&nbsp
摄氏度：&deg

4.标题标签和段落标签
标题
<h1 align="center"></h1>
<h1 align="right"></h1>
<h1 align="left"></h1>
段落
<p align="center">段落1</p>
<p align="left">段落2</p>
<p align="right">段落2</p>

5.无序标签
<ul type="dise"> 黑圆形 （待死）
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打游戏</li>
    <li>洗澡</li>
</ul>

<ul type="square">正方形 （死*过儿）
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打游戏</li>
    <li>洗澡</li>
</ul>

<ul type="circle">空心圆形（色扣）
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打游戏</li>
    <li>洗澡</li>
</ul>
6.有序标签
<ol type=1>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
</ol>
<ol type='I'>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
    <li>123123</li>
</ol>
7.自定义列表
<dl>
    <dt>广东省</dt>
    <dd>广州</dd>
    <dd>佛山</dd>
    <dd>深圳</dd>
    <dd>惠州</dd>

</dl>
<dl>
    <dt>湖南省</dt>
    <dd>长沙</dd>
    <dd>衡阳</dd>
</dl>
8.table表格的基本制作
<table border="2px" width="600px" cellpadding='10px' cellspacing='0'>
    <thead>
        <tr align="center">
            <th>开头1</th>
            <th>开头2</th>
            <th>开头3</th>
            <th>开头4</th>
            <th>开头5</th>
        </tr>

    </thead>
    <tbody>
        <tr align="center">
            <td>开头1内容</td>
            <td>开头2内容</td>
            <td>开头3内容</td>
            <td>开头4内容</td>
            <td>开头5内容</td>
        </tr>
        <tr align="center">
            <td>开头1内容</td>
            <td>开头2内容</td>
            <td>开头3内容</td>
            <td>开头4内容</td>
            <td>开头5内容</td>
        </tr>
        <tr align="center">
            <td>开头1内容</td>
            <td>开头2内容</td>
            <td>开头3内容</td>
            <td>开头4内容</td>
            <td>开头5内容</td>
        </tr>
        <tr align="center">
            <td>开头1内容</td>
            <td>开头2内容</td>
            <td>开头3内容</td>
            <td>开头4内容</td>
            <td>开头5内容</td>
        </tr>
        <tr align="center">
            <td>开头1内容</td>
            <td>开头2内容</td>
            <td>开头3内容</td>
            <td>开头4内容</td>
            <td>开头5内容</td>
        </tr>
    </tbody>
</table>

列合并: rowspan='1'
行合并: colspan="1"


9.img的一些属性值
（1）文件的路径
（2）width: 图片宽度
（3）height: 图片高度
（4）alt: 找不到图片的时候就会出现的文本
（5）title: 鼠标移上去就会显示的介绍

10.a标签
（1）download="文件名"：下载功能

（2）a标签实现页面跳转到对应的内容
<style>
    .content1 {
        width: 500px;
        height: 500px;
        border: 2px solid black;
    }

    .content2 {
        width: 500px;
        height: 500px;
        border: 2px solid black;
    }

    .content3 {
        width: 500px;
        height: 500px;
        border: 2px solid black;
    }

    .content4 {
        width: 500px;
        height: 500px;
        border: 2px solid black;
    }
</style>
</head>

<body>

    <div>
        <span><a href="#one">标题1</a></span>
        <span><a href="#two">标题2</a></span>
        <span><a href="#three">标题3</a></span>
        <span><a href="#four">标题4</a></span>
    </div>


    <div class="content1" id="one">内容1</div>
    <div class="content2" id="two">内容2</div>
    <div class="content3" id="three">内容3</div>
    <div class="content4" id="four">内容4</div>

</body>
（3）a标签失去刷新的效果，不跳转
<a href="javascript:void(0);">a不刷新，没有跳转</a>

（4）a标签在新的窗口打开(target)
<a href="跳转的链接" target="_blank"></a>

(5)去除a标签带来的下划线
在css样式中设置text-decoration:none;

10.移动显示下拉
<style>
    .aaa {
        width: 200px;
        height: 50px;
        background: red;

    }

    img {
        width: 200px;
        height: 200px;
        display: none;
    }

    .aaa:hover img {
        display: block;
    }
</style>

<body>

    <div class="aaa">移动显示下拉效果
        <img src="https://pic4.zhimg.com/v2-719eceddb4a92fac8f4b9aea488f3d1d_r.jpg" alt="">
    </div>

</body>
11.form表单，
（1）<input>的所有用法
<form action="" method="POST">
    <!-- 1.登陆页面 -->
    用户名：<input type="text"><br>
    密码：<input type="password"><br>
    <!-- 2.上下调整数字 -->
    数字：<input type="number"><br>
    <!-- 3.日期 -->
    年月：<input type="month"><br>
    周：<input type="week"><br>
    时分：<input type="time"><br>
    日期：<input type="date"><br>
    年，月，日，时，分：<input type="datetime-local"><br>
    <!-- 4.单选框 -->
    男：<input type="radio" name="sex" value="男">
    女：<input type="radio" name="sex" value="女">
    双性：<input type="radio" name="sex" value="双性别"><br>
    <!-- 5.复选框 -->
    吃饭：<input type="checkbox" name="hobby" value="吃饭">
    睡觉：<input type="checkbox" name="hobby" value="睡觉">
    打豆豆：<input type="checkbox" name="hobby" value="打豆豆"><br>
    <!-- 6.邮箱 -->
    邮箱：<input type="email" name="email"><br>
    <!-- 7.搜索框 -->
    搜索：<input type="search" name="search"><br>
    <!-- 8.颜色控件 -->
    颜色：<input type="color" name="color"><br>
    <!-- 9.进度条 -->
    进度条：<input type="range" name="range"><br>
    <!-- 10.隐藏 -->
    隐藏：<input type="hidden" name="hidden" value="hidden"><br>
    <!-- 11.表单提交 -->
    <input type="submit" value="提交">
    <!-- 12.信息重置 -->
    <input type="reset" value="重置">
</form>
（2）label：包括input自动，点击聚焦到input输入框
<label for="man">男：</label><input type="radio" name="sex" value="男" id="man">
<label><input type="radio" name="sex" value="男" id="man"></label>
（3）input的属性值
<form action="提交到哪里" method="post">
    autocomplete：自动填充
    <label> 用户名：<input type="text" name="username" autocomplete="on"></label>：打开填充
    <label> 用户名：<input type="text" name="username" autocomplete="off"></label>：关闭填充

    autofoucs：自动聚焦点
    <label> 用户名：<input type="text" name="username" autofocus></label>

    disabled：表单禁用
    <label>用户名1：<input type="text" name="aaa" disabled value="disabled"></label><br>

    readonly：表单不可编辑
    <label>用户名2：<input type="text" name="bbb" readonly value="readonly"></label><br>

    require：表单有数据的时候才能提交
    <label>用户名3：<input type="text" name="ccc" required value="有数据"></label><br>

    placeholder：占位符
    <label>银行卡号：<input type="number" name="num" placeholder="银行卡号: "></label><br>

    min和max:最大值和最小值
    <label>2-9：<input type="number" name="num1" max="9" min="2"></label><br>

    minlength和maxlength：文本最少文字个数和最多个数
    <label>文本输入的长度限制：<input type="text" name="text" maxlength="5" minlength="2"></label><br>

    <button>提交信息</button>
</form>

（4）select的使用
单选
<select name="slt">
    <option value="广州">广州</option>
    <option value="SZ">深圳</option>
    <option value="东莞">东莞</option>
    <option value="huizhou">惠州</option>
</select>
多选
<select name="sltMulti" multiple>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    <option value="东莞">东莞</option>
    <option value="惠州">惠州</option>
</select>
datalist，自动填充datalist里面的内容
<input type="text" name="phone" list="phone_list">
<datalist id="phone_list">
    <option value="苹果"></option>
    <option value="华为"></option>
    <option value="小米"></option>
    <option value="vivo"></option>
</datalist>
多个分组选中
<select name="option">
    <optgroup label="惠州">
        <!-- value是给电脑识别，option中间的文本是给人看的（显示在页面中） -->
        <option value="惠城区">惠城区</option>
        <option value="惠阳区">惠阳区</option>
        <option value="惠东县">惠东县</option>
    </optgroup>

    <optgroup label="广州">
        <!-- value是给电脑识别，option中间的文本是给人看的（显示在页面中） -->
        <option value="天河区">天河区</option>
        <option value="黄埔区">黄埔区</option>
        <option value="越秀区">越秀区</option>
    </optgroup>
</select>
（5）input上传
<form action="" method="post">
    1.accept：规定上传的图片类型
    <label> jpg形式：<input type="file" name="file1" accept="image/jpeg"></label><br>
    <label> gif形式：<input type="file" name="file2" accept="image/gif"></label><br>
    2.multiple：上传多个文件
    <label> 多个文件形式：<input type="file" name="file3" multiple></label>
</form>
    3.提交到百度进行搜索
<form action="https://www.baidu.com/s" target="_blank">
    在百度搜索框中搜索：<br>
    <label> <input type="text" name="wd"> </label><br>
    <button>提交信息到百度进行搜索</button>
</form>
（6）自定义输入框的宽高，cols：宽度，rows：高度
    <textarea name="suggest" cols="30" rows="10" placeholder="请输入您的看法"></textarea>

<!-- --------------------------------------------------------------------- -->
开始css部分

属性部分
1.a:link 	 |未访问的链接 
2.a:visited |已访问的链接 
3.a:hover   |鼠标移动到链接上 
4.a:active  |选定的链接 
5.input:focus |获得光标的时候
6.div:first-of-type |每个div中的第一个子元素
7.div:last-of-type |每个div中的最后一个子元素
8.ul li:nth-child(2) |可以根据数字选中第几个第几个
9.ul li:nth-child(odd)|奇数
10.ul li:nth-child(even)|偶数

nth-child可以换公式
公式: n可以理解为一个变量,取值0,1,2,3...
        ol li:nth-child(n+4) 
        ol li:nth-child(2n)   偶数
        ol li:nth-child(2n-1)  奇数

11.box::before |之前添加
12.box::after |之后添加


属性值部分
1.font-size: 20px |字体大小

2.color: orange |字体颜色

3.边框样式
border-style: solid |实线

border-style: dashed |虚线

border-style: doubble |双实线

border-style: dotted |点线

border-bottom: 10px solid transparent   |transparent 加上这个不显示  

4.margin: 0 auto |水平居中

5.display:none |隐藏 不占位置    visibility:hidden |隐藏，占位置

6.display:block |显示            visibility:visible |可见度

7.overflow
overflow: hidden |超过宽高隐藏
overflow: scroll |不管内容有没有超出都出现滚动条
overflow: auto |不管内容超出，出现滚动条

8.maxwidth |最大宽度  maxheight |最大高度
9.minwidth |最小宽度  minheight |最小宽度

10.文本
white-space: nowrap             |文本不会转换，正常执行
white-space: pre-wrap           |保留空白符序列，但是正常地进行换行
text-indent: 10px               |首行缩进2字符
text-align： left               |把文本排列到左边。
text-align： right	            |把文本排列到右边。
text-align： center	            |把文本排列到中间。               
text-align： justify	        |实现两端对齐文本效果。
text-align： inherit	        |规定应该从父元素继承 text-align 属性的值。
letter-spacing：10px            |字母之间的间距
work-spacing：10px              |单词之间的间距
text-transform: lowercase       |字母小写
text-transform: uppercase       |字母大写
text-transform: capitalize      |文本中的每个单词以大写字母开头
text-decoration: underline      |定义文本下的一条线
text-decoration: overline       |定义文本上的一条线
text-decoration: line-through   |定义穿过文本下的一条线
text-decoration: none           |取消a标签的下划线

文本三剑客：让文本用...显示
white-space: nowrap     |文本在一行显示
overflow: hidden        |然后把超出部分隐藏
text-overflow: ellipsis |超出部分用...显示

文本三剑客多行显示：
display: -webkit-box;
-webkit-line-clamp: 3 |要显示多少行
-webkit-box-orient: vertical;
overflow: hidden 超出隐藏

11.字体
font-weight ： normal：定义标准的字符。
font-weight ： bold	定义粗体字符。
font-weight ： bolder	定义更粗的字符。
font-weight ： lighter	定义更细的字符。

12.list-style: none |清除ui和li的默认样式

13.浮动
float: left |左边浮动
float: right|右边浮动
clear: both  |清除浮动