HTML学习笔记

总有一天全城的人都要高看我们

已于 2022-01-25 13:18:12 修改

阅读量1.4k

点赞数 1

分类专栏：笔记文章标签： html css css3

于 2022-01-20 19:00:26 首次发布

本文链接：https://blog.csdn.net/qq_44642372/article/details/122607352

版权

笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML学习笔记

跟着黑马程序员学的，在这里做个笔记。

基本语法

1.声明

<!DOCTYPE>是一个文档类型声明标签，不是HTML标签；位于文档最前面的位置，在<html>标签之前。<head></head>设置标签名称。
<!DOCTYPE html>告诉浏览器当前页面使用html5版本来显示页面。

2.语言

<html lang="zh-CN" >表示用的是中文，en表示英文，fr为法文。

3.编码格式

<meta charset="UTF-8" >其中UTF-8称为万国码，GB2312为中文简体，BIG5为中文繁体，GBK包含简体和繁体。

4.标题

<h1></h1>到<h6></h6>为六级标题，依次减小字号。

5.段落与换行

<p></p>为段落标签，<br />为换行标签，二者行间距不同，段落标签的行间距大。

6.字体格式

<strong></strong>或<b></b>为粗体
<em></em>或<i></i>为斜体
<del></del>或<s></s>为~~删除线~~
<ins></ins>或<u></u>为下划线

7.分块标签

<div></div>和<span></span>为分块标签，div一行只能一个，span一行可以多个，且间距较小。

8.图像标签

<img src="" alt="" title="" width="" height="" border=""/>
alt表示图片无法显示时用文字替换；
title表示鼠标放在图片上时显示的文字；
width和height表示图片显示的宽度和高度，当只设置宽度或者高度时，图片会自动调整大小，保证以正常比例显示，如果两个都设置，就会按照设置的值压缩；
border表示图片边框，"15"中的数字表示边框粗细。

9.超链接

<a href=" " target=" "></a>href中的是超链接地址，target中的代表打开窗口的方式，默认是_self，表示在当前窗口打开，_blank表示在新窗口打开。如果href中的是文件，如.exe或者.zip等形式，点击时会直接下载。
<a href=" "> <img src=" " /> </a>表示给网页元素超链接，这里是给图片设置超链接。
锚点连接（点击链接，直接跳到设置的位置）：链接文本设置属性href中为#名字的形式，如<a href="#name">第二集</a>，在目标位置处添加id="name",如<h3 id="name">第二集</h3>。

10.注释：``，快捷键ctrl+/

11.特殊符号

<hr>为水平线，效果如上。
在这里插入图片描述

12.表格：

代码：

<table> 
	<tr> 
		<td> 111</td>
		<td> 222</td>
	 </tr>
	 	<tr> 
		<td> 333</td>
		<td> 444</td>
	 </tr>
 </table>

<tr></tr>表示的是表格的一行，其中的<td></td>表示每个表格中的内容。
效果如下：

111	222
333	444

表头用<th> </th>代替<td> </td>，会加粗居中显示。

<table align="center" border="1" cellpadding="1" cellspacing="0" width="" height=""></table>

各参数含义如下：
在这里插入图片描述
可以用<thead></thead>和<tbody></body>区分表格头部和主体部分。
<td colspan="2"></td>可以跨列合并单元格
<td rowspan="2"></td>可以跨行合并单元格

13.无序列表

<ul>
    <li>first</li>
    <li>second</li>
</ul>

有序列表把<ul>换成<ol>
效果如下图：

在这里插入图片描述

14.自定义列表

代码：
<dl>
        <dt>Subscribe me</dt>
        <dd>weibo</dd>
        <dd>wechat</dd>
        <dd>contact us</dd>
</dl>

效果：

Subscribe me

weibo

wechat

15.表单

input

    <form>
        <label for="username">Username:</label><input type="text" id="username" name="name" value="Please input your name" maxlength="6"> <br>
        password:<input type="password" name="pwd"> <br>

        <!-- 当name相同时，radio单选框才能实现多选一，否则就可以多选了 -->
        sex: <label for="male">Male</label><input type="radio" id="male" name="sex" value="male" checked="checked">  <label for="female">Female</label> <input type="radio" id="female" name="sex" value="female"> <br>
        hobby: 1<input type="checkbox" name="hobby" value="1" checked="checked"> 2<input type="checkbox" name="hobby" value="2"> 3<input type="checkbox" name="hobby" value="3">
        <br>

        <!-- 点击提交按钮之后，会把表单的数据提交给后台 -->
        <input type="submit" value="提交">
        <input type="reset" value="重新填写"><br>

        <input type="button" value="获取验证码"><br>
       上传头像: <input type="file" value="选择文件">

    </form>

效果如下：
在这里插入图片描述

在这里插入图片描述

select

       From:
        <select>
            <option>ShanDong</option>
            <option selected="selected">BeiJing</option>
       </select>

效果：
在这里插入图片描述

textarea

用于输入多行文本

Feedback:
       <textarea rows="3" cols="20">这是默认显示的文字</textarea>

效果：
在这里插入图片描述

CSS层叠样式表

1.CSS选择器

基础选择器：

<!--在head中添加：-->
<style>
p {
	color: red;
	
}
</style>
<!--这里p表示把所有的p标签都设置为这种格式，如果换成其他的标签，就可以设置其他的。-->

类选择器：

在style中定义一个类，在要使用的标签中加上class属性：

<style>
.red {
		color: red;
}
</style>

<body>
<p class="red">这里的颜色就是红色的</p>
</body>

class属性中可以有多个类,中间用空格隔开，例如：

<style>
.red {
		color: red;
}
.font35 {
				 font-size: 35px;
				 }
</style>

<body>
<p class="red font35">这里的颜色就是红色的</p>
</body>

id选择器：

<style>
#pink {
		color: pink;
}
</style>

<body>
<p id="pink">这里的颜色就是红色的</p>
</body>
<!--这里的id只能用一次，如果多次调用，简单搭建网页时不会报错，但是使用js调用时就会报错了-->

通配符选择器：

直接在style中定义：

<style>
* {
		color: pink;
}
</style>

不需要调用，直接把所有的元素都赋了这个属性，在特殊情况下才用到。

2.font-family设置字体

跟设置基础选择器格式相同：

<!--在head中添加：-->
<style>
 p {
            font-family: 'Times New Roman', Times, serif;
        }
</style>
<!--这里p表示把所有的p标签都设置为这种格式，如果换成其他的标签，就可以设置其他的。-->
<!--这里设置了多种字体，默认以第一种显示，如果浏览器没有第一种字体，依次往后显示-->

font-style设置字体样式
font-weight设置是否加粗
font-size设置字体大小

3.字体复合属性

<!--在head中添加：-->
<style>
 p {
            font: font-style  font-weight  font-size/行高  font-family;
        }
</style>

以上属性要按顺序写，不需要设置的可以省略，但必须要有font-size和font-family，各属性之间用空格隔开。
总结：
在这里插入图片描述

4.文本属性

格式和字体定义时的相同。

<style>
p {
    color: red;
    font-size: 25px;
    text-align: center;
    text-indent: 2em;
    text-decoration: none;
}
</style>

在这里插入图片描述

5.行内样式表

例如：

<div stytle="color: red; font-size: 12px;"></div>

6.行外样式表

新建一个.css文件，把所有css代码都放到这里。
在html网页代码中使用link标签引入样式：

<link rel="stylesheet" href="css文件路径">

这种是最常用的，可以用来控制多个页面。

7.后代选择器

在style中，父标签(也可以是类) 子标签 {}，这样就可以设置指定的父标签中的子标签格式了，例如：

<style>
ol li a {
			color: red;
			}
</style>

8.子选择器

<style>
ol>li{
			color: red;
			}
</style>

只选择最近一级的子元素。

9.并集选择器

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

10.链接伪类选择器

在这里插入图片描述

<style>
a: link {
			color: red;
			}
a: visited {
				color: green;
				}
</style>

为了确保生效，在声明时要按照HVLA的顺序来进行。

11.focus选择器

一般只针对于input输入表单，在光标选中时才会表现出来。

<style>
input: focus{
			background-color: red;
			}
</style>

选择器总结

在这里插入图片描述

快速生成html结构语法

1.直接输入标签名，按tab就可以自动生成标签；
2.生成多个相同的标签，例如div*3，然后按tab；
3.生成有父子关系的标签，例如ul>li，然后按tab；
4.生成有兄弟关系的标签，如div+p，tab；
5.标签.类名，tab，可以直接生成带有类的标签，标签#id名，生成带有id的标签；
6.标签{},tab，大括号中的文字可以直接在标签中；有多个时可以标签{}$*数字;

元素显示模式

将元素以块显示出来，本来可能以行内元素显示，以块显示可以独占一行，比如可以把a标签转换成块模式显示：

<style>
	a {
	display: block;
	}
</style>

这样可以按照块的格式来设置a，也可以实现鼠标接近某一区域的时候就能触发链接。

背景

背景颜色：

background-color: transparent;
transparent为透明，也可以是red、pink等

背景图片：

background-img: url();
url中为绝对的或相对地址

背景平铺：
在这里插入图片描述
背景位置：第一个参数为x轴，第二个为y轴

background-position:left top;

精确位置：第一个参数为x值，第二个为y值（中间用空格隔开），如果省略一个，则设置的参数一定是x值，另一个默认垂直居中。

background-position:20px 50px;

背景重复：

background-repeat: norepeat;

背景图像固定：

background-attachment: fixed;背景图像固定不动
background-attachment: scroll;//背景图像随对象内容滚动

在这里插入图片描述
背景透明度：

background: rgba(0,0,0,0.3);
最后一个参数为透明度，0.3可以写成.3

总结
1111111111

总有一天全城的人都要高看我们

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML学习笔记跟着黑马程序员学的，在这里做个笔记。基本语法1.<!DOCTYPE>是一个文档类型声明标签，不是HTML标签；位于文档最前面的位置，在<html>标签之前<!DOCTYPE html>告诉浏览器当前页面使用html5版本来显示页面。2.<html lang="zh-CN" >表示用的是中文，en表示英文，fr为法文。3.<meta charset="UTF-8" >其中UTF-8称为万国码，GB2312为中文简体，BIG
复制链接

扫一扫