本文详细介绍了HTML和CSS的基础知识，包括HTML的结构、常用标签、表格和表单的使用，以及CSS的基本语法和选择器，是初学者入门前端开发的理想指南。
HTML，CSS
HTML超文本标记语言
HTML的主要构成
- html的最前两行
<!--这是注释的方法-->
<!DOCTYPE html> <!--声明-->
<html lang="en"> <!-- 表示文件的开始，lan="zh_CN" 表示支持中文-->
html一般分为两部分 头部（head）和主体（body）
html的头部
<head>
<meta charset="UTF-8"> <!--表示当前页面使用的utf-8字符集-->
<title>Title</title> <!--表示标题-->
</head>
身体部分
- html页面显示的主体内容
<body> </body>
HTML基本语法
基本
- 部分标签需要一一对应
<开头> </结尾>
-
对大小写不敏感
-
标签可以设置自己的属性
- 基本属性 修改样式 例如：bgcolor 背景颜色
- 事件属性 设置相应后的代码 例如：onclick 表示点击
-
标签分为单标签和双标签
- 单标签
</br> <!--换行--> </hr> <!--分割线-->- 双标签就是需要一一对应，有头有尾的标签
标签注意事项
- 标签需要正确嵌套
正确：<body><div> </div></body>
错误：<body><div> </body></div>
- 标签必须正确关闭，有头有尾
- 给了标签属性必须设置值
- 注释不能嵌套
特殊字符显示
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| :------- | :---------------- | :---------------: | :------- |
| | 空格 | |   |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML常用标签
font
<font color="blue" size="7" face="宋体"></font>
标题类标签
<h1 align="对齐方式">标题由大到小</h1> <!--right 右对齐 默认左对齐 left 居中 cent-->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
链接类型标签
<a herf="链接">链接中文名</a> <!--超链接标签，属性target="跳转方式"，跳转方式 _self 当前页面跳转 _blank 打开新页面跳转-->
列表标签
无序列表
<ul type="内容前图标的样式"> <!--ul无序列表-->
<li>内容</li>
<li>内容</li>
<li>内容</li>
<ul>
有序列表
<ol > <!--ol有序列表-->
<li>内容</li>
<li>内容</li>
<li>内容</li>
<ul>
图片标签
路径
-
相对路径 从文件名开始
. 表示当前目录
… 表示上一级目录
文件名 当前目录文件，可以省略**./**
-
绝对路径
http://ip:port/工程名/资源路径
标签使用
<img src="路径" width="宽度" height="高度" border="边框大小 1~x" alt="没有加载出图片显示的文字">
表格标签
<!--table是表格标签，tr是行标签，th是表头标签，td是单元格标签,b加粗-->
<!--colspan 属性设置单元格跨列，rowspan 属性设置跨行-->
<table border="边框大小" cellspadding="单元格间距">
<tr> <!--一行-->
<td> 内容 </td> <!--一列-->
</tr>
<tr> <!--一行-->
<td align="对齐方式"> 内容 </td> <!--一列-->
</tr>
<tr> <!--一行-->
<td align="对齐方式"><b> 内容 </b></td> <!--一列-->
</tr>
</table>
iframe
<!-- iframe划分一个单独的页面 -->
<iframe src="html文件" wdith="xx" height="yy"> </iframe>
表单标签 form 结合用户操作组件
<form action="http://localhost:8080" method="get"> <!--action 提交到的网址 ， method 方法是提交-->
用户名称：<input type="text" name="username"><br/> <!--文本输入框-->
用户密码：<input type="password" ><br/> <!--密码输入框-->
性别 <input type="radio" name="sex">男<input type="radio" name="sex">女 <!--单选框使用方法-->
兴趣爱好 <input type="checkbox">java <input type="checkbox">c++ <!--复选框-->
下拉框 <select>
<option>列表选项</option>
<option>列表选项</option>
<option>列表选项</option>
</select>
自我评价 <textarea rows="显示行数" cols="列数"></textarea>
<input type="reset" value="按钮名字"> <!--重置按钮-->
<input type="submit"> <!--提交按钮，只有name的组件才会被提交-->
<input type="file"><!--文件上传-->
</form>
- GET 请求
- 浏览器中的地址是：action 属性 [+?+参数]
- 不安全
- 有长度限制
- POST请求
- 浏览器中只有action属性值
- 相对于GET更安全
- 理论上么有长度限制
部分标签
div
- 默认独占一行
span
- 他的长度是封装数据的长度
p
- 默认会在段落上下空出一行
CSS
如何与HTML结合
- 方法一
<div style="border: black 1px solid;"></div> <!--在标签内部添加style属性，在其中添加修改-->
- 方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> /*在head部分添加一段css代码，全局的div类型都有效果*/ css代码注释 /* */
div{
border: black 1px solid
}
</style>
</head>
<body>
<div>------------</div>
</body>
</html>
-
方法三
把css写成一个css文件，然后在HTML文件的head部分引入该文件。
引入方法
<link rel="stylesheet" type="text/css" href="css文件地址">
CSS选择器
标签名选择器
div{
}
span{
}
id选择器
- 给标签设置id（）
<div id="vid">
</div>
- 在css文件里面选择该id，并设置外观
#vid{
}
class选择器
- 给标签设定class（可重复）
<div clss="dcl">
</div>
- 选择class
.dcl{
}
组合选择器
- 多个选择器共用
.dcl,#vid,div,span{
}
CSS基础属性
- border 边框
border: black 1px solid; /* 颜色，尺寸 ，样式，实线solid/虚线bashed
- 字体颜色
color:颜色;
- 大小
width：xx px;
height：yy px;
- 居中
margin-left:auto; 左边框大小
margin-right:auto; 右边框大小
- 超链接去下划线
text-decoration:none;
- 表格样式
table{
border:1px solid black; 设置边框大小，样式，颜色
border-collapse:collapse; 去掉边距
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
