这篇教程详细介绍了HTML的基础语法，包括标签规范、基本结构如<html>、<head>、<body>等，以及常用的HTML标签，如标题、段落、列表、图像和超链接等。同时，讲解了CSS的基础选择器，如标签选择器和类选择器，用于美化页面内容。此外，还涵盖了表单元素的使用和CSS在美化表单方面的应用。
萌新入门,做听课笔记,学的是黑马程序员pink老师的视频,可以去b站搜
目录
HTML
一.语法规范
1.标签写在尖括号里"<>",例如<html>.
2.标签一般都为双标签(单标签很少)例如:
<html></html>.第一个是开始标签,第二个是结束标签.
单标签:<br/>
3.标签的关系,存在包含关系和并列关系
包含关系例:
<head>
<title></title>
</head>并列关系例:
<head></head>
<body></body>二.基本结构标签(骨架标签)
<html></html>HTML标签,页面中最大的标签,我们称之为根标签
<head></head>文档的头部,在这之中我们必须要设置title标签
<title></title>文档的标题,让页面拥有属于自己的网页标题
<body></body>文档主题,元素包含文档所有内容,页面内容基本放到body里面三.vscode工具生成骨架标签新增代码(一定要写):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>1.!DOCTYPE标签
(1)文档类型声明,位于<html>标签之前,告诉浏览器采取html5版本来显示页面
(2)<!DOCTYPE>不是HTML标签,它就是文档类型声明标签
2.lang语言 <html lang="en">
语言类型:
(1)en定义为英文
(2)zh-CN为中文
3.charset字符集 <meta charset="UTF-8">
UTF-8为万国码,基本包含了全世界所以国家要用到的字符(不写可能乱码)
四.常用标签
1.标题标签
(1)分为6个等级,<h1>-<h6>
<h1></h1>(2)双标签,作为标题使用,依据重要性递减
(3)加了标签文字会变粗,字体依次变大,独占一行
2.段落标签
<p>段落标签</p>(1)文本在一个段落中会根据浏览器窗口大小自动换行.
(2)段落和段落之间保有空隙
3.段落和换行标签
<br/>4.文本格式化标签(文档文字加粗,斜体,下斜线,下方案例就推荐前面的那一种写法)
(1)加粗:
<strong></strong>或者<b></b>(2)倾斜
<em></em>或者<i></i>(3)删除线
<del></del>或者<s></s>(4)下划线
<ins></ins>或者<u></u>5.<div>和<span>标签(双标签)
这两个标签用来布局网页,类似于盒子,可以装单独的内容等.
(1)<div></div>独占一行,可理解为一个很大的盒子.
(2)<span></span>一行可以放多个<span>,相当于小盒子
6.图像标签和路径
1.图像标签:<img>(单标签)
(1)src(必须属性)必须写,指定了<img>图像文件的路径和文件名
<img src="图像URL"/>
将图片文件和该html文件拖到同一个文件夹里,并且把图像文件名写进去,就可以了.(2)alt(替换文本)当图像不能显示就显示文字
1<img src="图像URL" alt="图片无法显示"/>(3)title(提示文本)鼠标放在图像上,显示的文字
<img src="图像URL" title="邱一凡卷!"/>(4)width(图片宽度)
<img src="图像URL" width="500"/>(5)height(图片高度)
<img src="图像URL" height="400"/>ps:最好只修改宽度或者高度,这样就会等比例压缩,不会出现图像的变形
(6)border(边框粗细)
<img src="图像URL" border="10"/>ps:①图像标签可以有多个属性,必须写在标签名后面
②属性不分前后,均以空格分开
③属性="属性值"
7.路径
(1)目录文件夹:存所有的该网站的html文件和素材
(2)根目录:打开目录文件夹第一层就是根目录
(3)相对路径:
若要找到同级文件夹的下一层的文件
<img src="同层的文件夹名/该文件夹下一层要使用的文件名"/>若要找上一层的文件
<img src="../上一级的文件名"/>(4)绝对路径:
指文件的绝对位置,可以直接在电脑中找图片的文件,可以在网络中找图片(找网站中的图片)
8.超链接标签
<a>标签可用于定义超链接,作用是从一个页面连接到另一个页面.
(1)链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图片</a>①herf(必须属性)用于指定链接目标的url地址,有了它就有了超链接功能
②target:用于指定链接页面打开方式,target后面可以写_self或者_blank.其中_self为把当前页面变成链接通向的网页,不保留原来的网页,_blank为打开新窗口并通往新窗口.
(2)链接的分类:
①外部链接:可以跳转到外部网站
<a href="https://www.csdn.net/" target="_blank">文本或图片</a>②内部链接:网站内部之间的相互链接
<a href="网站内的html文件" target="_blank">文本或图片</a>两者都只需要在href后写目标的链接的地址即可.
③空连接:在地址写#
<a href="#">文本或图片</a>④下载链接:
<a href="文件或者压缩包">文本或图片</a>⑤锚点链接:当我们点击链接时,可以快速定位到页面中的某个位置
在链接文本的href属性中写一个""#目的地""的形式,在目标位置添加一个id属性:id="目的地".
<a href="#tar"></a>
id="tar"9.注释和特殊字符标签
(1)注释标签:以"<!--"开头,"-->"结束.(快捷键:ctrl+/)
注释后在文档中不会在显示该部分内容,也不会执行,这是方便程序员来查看的,解释功能.
(2)特殊字符:
--空格( ):
--小于号(<): <
--大于号(>): >
--与号(&): &
--人民币(¥): ¥
--版权(©): ©
--注册商标(®): ®
--摄氏度 : °
--正负号 : ±
--乘号(x): ×
--除号(÷): ÷
--平方(²): ²
--立方(³): ³
五.表格
1.表格的基本结构
<table>
<tr>
<td>...</td> <!--单元格-->
......
</tr> <!--行-->
</table>表头的单元格(居中加粗):<th></th>
<thead></thead>:包含表头,必有<tr></tr>
<tbody></tbody>:包含表的内容
2.表格的属性(不常用)
(1)align:规定表格对周围元素的对齐方式,具体属性值可以为:"left,center,right"
(2)border:规定表格单元是否有边框,默认为"",表示没有边框
(3)cellpadding:规定表格单元边沿与其内容之间的空白,默认1像素
(4)cellspacing:规定单元格之间的空白,默认2像素
(5)width:规定表格宽度
<table align="left" border="1" cellpadding="0" cellspacing="0" width="500">
</table>3.合并单元格
(1)跨行合并:rowspan="合并单元格个数"
(2)跨列合并:colspan="合并单元格个数"
<td colspan="2"></td>合并单元格之后记得删除合并后覆盖的单元格.
五.列表标签
1.无序列表(重要)
(1)语法格式
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
(2)特征属性
①无序列表各项间没有顺序级别之分,是并列的
②<ul></ul>中只能嵌套<li></li>,其余的文字和标签都不行
③<li></li>之间相当于一个容器,可容纳所有元素
④无序列表会带有自己的样式属性,实际使用css来设置
2.有序列表
(1)语法格式(会自动给列表项编号)
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
(2)特征属性
除了①外其余都和无序列表相同
3.自定义列表
(1)语法结构
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
......
</dl>
(2)特征属性
①<dl></dl>里面只包含<dt>和<dd>
②<dt>和<dd>个数没有限制机场一个<dt>对应多个<dd>
4.表单标签
1.表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单控件
</form>action:url地址,用于指定接受并处理表单数据的服务器程序的url地址
method:get/post,用于设置表单数据的提交方式,其取值为get或者post.
name:名称,用于指定表单的名称,以区分同一个页面的多个表单域
2.表单控件(表单元素)
定义:允许用户在表单中输入或者选择内容的控件.
(1)input输入表单元素(输入,用于收集用户信息)<input/>(单标签)
<input type="属性值"/>type属性值:
①text:用户可以输入文本(可以显示文本,默认长度20).
②password:输入密码的字段(密码等).
③radio:单选按钮,可作出进行选择的内容.
④checkbox:复选框,可以进行多选
⑤button:定义可以点击的按钮(用于javaScript启动脚本)
<input type="button" value="按钮">
后期搭配js使用,定义一个按钮⑥file:定义输入字段和"浏览"按钮,可以在本地选择文件上传
<input type="file" >⑦hidden:定义隐藏的输入字段
⑧image:定义图像形式的提交按钮
⑨reset:定义重置按钮,清除表单所有元素
<input type="reset" value="重新设置">
类似于下面的reset,可以用value去赋值改变显示名称.作用是按这个按钮就会一键清空表单域⑩submit:定义提交按钮,提交按钮会把表单数据发送到服务器
<input type="submit" value="注册">
<!--value值可以定义提交按钮上面的文字-->
<!--这个标签可以把表单上交到form中的action的属性值页面-->其他属性值:
①name属性:(由用户定义)当有多选或者单选时,若只选一个,需要给表单元素定义name属性,当保证几个选项的name属性相等,可以实现单选.定义input元素的名称
性别:男<input type="radio" name="sex">女<input type="radio" name="sex">②value属性:(由用户定义)规定input元素的值,(在文本框可以显示)
ps: value和name是每个表单元素必有的,主要给后台人员使用
name表单元素的名字,要求单选按钮和复选框都要有相同的name值.
③checked:单选和复选框需要默认被选取的时候,可以给它加上checked,属性值为checked.
爱好:吃饭<input type="radio" name="hobby" checked="checked">睡觉<input type="radio" name="hobby">④maxlength:属性值为正整数,可以规定输入字段中字符的最大长度.
(2)<label>标签
<label>标签使用场景:label用于绑定表单元素,在点击该标签内的文本时,浏览器会自动将光标转到对应表单元素上.
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
id和for可绑定label与input,属性需要相等(2)select下拉表单元素:
使用场景:当有多个选项让用户选择,想要节约页面空间,可以使用<select>标签定义下拉列表
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
...
</select>ps:在<option>中定义selected="selected"时,当前项即为默认选项.
(3)textarea文本域
不同于文本框text,可以输入更多的内容的大文本框(text单行,textarea多行输入,常见于留言板,评论区等).
<textarea rows="3" cols="20">文本内容
</textarea>
cols是每行多少字
rows属性值就是显示多少行
一般用css改变修饰文本框大小Css(层叠样式表)
一.css总述
作用,美化页面
组成:选择器+一条或者多条声明.( 选择器{样式 ; '} ).样式包含一个键值对,属性 : 属性值.
选择器为html中的标签
位置:位于<head>和</head>之间,建立<style>标签.
二.css基础选择器
1.基础选择器
(1)标签选择器:将标签名作为选择器(改某一大类标签属性)
例子:(缺点,只能改一类标签)
<style>
p {
color: pink;
font-size: 30px;
}
div {
color: blue;
font-size: 30px;
}
</style>
属性可以为width,height,background-color......(定义盒子的属性)(2)类选择器(可以选择几个或一个标签的属性进行修改)
基本语法:
.类名 {
属性1: 属性值1;
...
}
<!--类名可以随便起-->
.red {
color: red;
}
<!--将所有拥有red类的html元素均变为红色-->
<div class='red'>变红色</div>通过在<head></head>中的<style></style>中定义类,可以在下方的标签中调用class.调用方法是在标签内部加一个class,并且把定义的类名赋值上去.(可以写多个类名,中间隔着空格)
2.复合选择器
持续更新,随学习进度更新
1226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
