本文详细介绍了HTML的基础语法，包括注释、基本标签、实体符号、表格、背景图片和超链接等，并演示了如何使用EditPlus进行下载安装和基本设置。此外，还讲解了HTML中的列表、表单元素、CSS样式以及页面布局等内容，是初学者入门HTML和CSS的实用教程。
(77条消息) EditPlus下载安装及基本设置_沧海黎明的博客-优快云博客_editplus怎么下载
第一个HTML
<!--
1.这是HTML的注释
2.加上以下的代码的第一行就表示HTML5的语法，去掉就说明是HTML4.0
3.HTML不区分大小写，语法松散不严格
-->
<!doctype html>
<html>
<head>
<title>第一个HTML程序</title>
</head>
<body>
欢迎学习html
</body>
</html>
HTML的基本标签
<html>
<head>
<title>
这是标签
</title>
</head>
<!--换行-->
<body>
<p>她才刚把这东西放进去，还没化开呢！无奈初月已经在她面前急的上窜下跳，一副再不走全TM吃屁的样子，笙歌抄起裤兜里拿来应急的一双筷子匆匆搅拌了几下，差不多到个看不出来的地步，笙歌抽出筷子一撮，看的初月直楞，最后一个爆炒栗子砸她头上</p><p>她才刚把这东西放进去，还没化开呢！无奈初月已经在她面前急的上窜下跳，一副再不走全TM吃屁的样子，笙歌抄起裤兜里拿来应急的一双筷子匆匆搅拌了几下，差不多到个看不出来的地步，笙歌抽出筷子一撮，看的初月直楞，最后一个爆炒栗子砸她头上</p>
<!--换行-->
<h1>世界还是很美好的</h1>
<h2>世界还是很美好的</h2>
<h3>世界还是很美好的</h3>
<h4>世界还是很美好的</h4>
<h5>世界还是很美好的</h5>
<h6>世界还是很美好的</h6>
<!--换行标签,br是一个独目标签-->
Hello,world!
Hello,<br>world!
<hr>
<hr color="red" width=50%>
<!--预留格式-->
<pre>
for(i=0;i<100;i++)
{}
</pre>
<!--粗体字，斜体字，删除字-->
<del>删除字</del>
<b>加粗字</b>
<l>斜体字</l>
<ins>插入字</ins>
10<sup>2</sup>
10<sub>2</sub><br>
<font color="red" size=50>你好</font>
</body>
</html>
实体符号
实体符号总是以&开头，然后以;结束
<html>
<title>实体符号</title>
<!--实体符号总是在-->
<body>
<!--<表示的是小于的实体符号，>表示的是大于的实体符号-->
a<b>c
a b c <br>
<!--&absp;表示的是空格的实体符号-->
a c b
</body>
</html>
表格
<html>
<title>
表格
</title>
<body>
<br><br><br><br>
<center><h1>员工信息列表<h1></center>
<hr>
<table align="center" border="2px" width="30%" height="150px">
<!--align表示的是放的位置-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td align="center">a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</body>
</html> 
<html>
<title>合并单元格</title>
<body>
<table align="center" border="1px" width="50%">
<tr align="center">
<!--th标签也是单元格但是比td多了加粗和居中-->
<!--<td>1</td>
<td>2</td>
<td>3</td>-->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td rowspan=2>30</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
</tr>
</table>
</body>
</html>
背景图片设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="red"background="img/t018bb7e86156b2f37f.jpg">
</body>
</html>设置图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置图片</title>
</head>
<!-- 这里面同样是可以设置图片的路径，宽度以及名称 -->
<!-- img开头 这是单目的文件 src里面设置图片的位置 width设置图片的大小 不去设置高度否则会失真 title是鼠标点击在上面会提示的文字 -->
<!-- alt里面放置的是图片找不到了的提示信息 -->
<!-- 在开始结束标签里面有一种写法就是把前面删了，然后后面加个/ -->
<body>
<img src="img/t018bb7e86156b2f37f.jpg" width="800px" title="小猫咪"alt="图片找不到了"/>
</body>
</html>超链接文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接文本</title>
</head>
<body>
<a href="https://www.bilibili.com/">b站</a>
<a href="https://www.baidu.com/">百度</a>
<br /><br />
<!-- target里面可以放很多东西像_blank表示的是在新窗口中打开 _self表示的是在当前窗口中打开 -->
<a href="html-01.html">01</a>
<a href="html-01.html" target="_blank">01</a>
</body>
<!-- 超链接的作用就是可以通过客户端像服务器端发送请求 -->
<!-- 超链接和在网站上去写url发送请求是没有区别的，超链接更傻瓜式 -->
</html>列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="I">
<li>蔬菜
<ol>
<li>油菜</li>
<li>油麦</li>
</ol>
</li>
<li>水果</li>
<li>甜点</li>
</ol>
<!-- 无序列表 -->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>北京</li>
<li>清华</li>
<li>北大</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>html最重要的内容：form表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://www.baidu.com/">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" />
<input type="reset" value="清空"/>
</td>
</tr>
</table>
</form>
</body>
</html>
只有添加了name之后才会传递数值，否则不能传递数值 不填写数值默认提交的是空字符串
用户表单的实现内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- method是post不会将信息显示到浏览器的搜索这里，是get则会显示 -->
<form action="http:www.baidu.com" method="post">
账号
<input type="text" name="username"/>
密码
<input type="password" name="password"/>
<br>
确认密码
<input type="password"/>
性别
<input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="0"/>女
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>喝酒
<input type="checkbox" name="interest" value="smoke"/>抽烟
<select name="gender">
<option value="gz">高中</option>
<option value="college">大学</option>
</select>
<!-- 文本域没有value属性，往文本域中添加的就是文本属性 -->
<textarea rows="10" cols="5" name="text"></textarea>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</form>
<!-- 超链接提交的数据都是固定不变的，超链接提交的都是get请求 -->
<a href="https://lanqiaocompetition.acmcoder.com/cand/login?yu49rqhj">提交</a>
</body>
</html>
<select multiple="multiple">
<option>河北</option>
<option>河南</option>
<option>北京</option>
<option>天津</option>
</select>
file控件：可以选择文件
<body>
<input type="file"/>
</body>隐藏域的hidden控件：
<form action="html-01.html">
<input type="hidden" name="xiaoyang" value="15"/>
<input type="submit" value="提交"/>
</form>
readonly和disabled
readonly和disabled都是只读，但是disabled不能提交到服务器
<form action="http://localhost:8080/taobao/save">
yyyyy<input type="text" name="yyyy" value="YYYY" readonly/>
xxxxx<input type="text" name="xxxx" value="XXXX" disabled/>
<input type="submit" value="提交"/>
</form>
maxlength可以设置输入的最大的字符的数量
ZZZZZ<input type="text" name="zzzz" value="zzzz" maxlength="5"/>
name要是没有数据不会提交，不希望提交就不需要设置name，提交才需要设置name
html中的元素id属性：
每个html元素都有自己的元素属性
div和span
<div id="121">
<div>
nihaoa
</div>
</div>
</body>
CSS：层叠样式表语言
修饰HTml元素中的某些样式，让html元素更好看
css就是用来修饰html的所以新建的文件还是html文件
常见的要会写，其他人写的可以看懂：
最常用的方式：
<head>
<meta charset="utf-8">
<title>css引入第一种方式</title>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: aqua;display: block;border: red;border-width: 1px;border-style: solid;"
</body>
id选择器，根据id来选择css的标签
<head>
<meta charset="utf-8">
<title>根据id来选择样式</title>
<style>
#usernameerror{
color:red;
font-size: 15px;
}
</style>
</head>
<body>
<span id="usernameerror">对不起你的用户名不能为空</span>
</body>
根据标签来选择，标签选择器：
<head>
<meta charset="utf-8">
<title>根据标签来选择</title>
<style>
div{
width: 300px;height: 200px;background-color: aqua;display: block;border: red;border-width: 1px;border-style: solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
根据类来选择样式（可以跨标签）：
<head>
<meta charset="utf-8">
<title>根据类来选择</title>
<style>
.myclass{
border: 1px solid red;
width: 400px;
}
</style>
</head>
<body>
<select class="myclass">
<option>专科</option>
<option>本科</option>
</select>
<br />
<br />
<br />
<br />
<input type="text" class="myclass"/>
</body>
什么是样式表：CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，但通常写在<style>标签里。只要是<style>标签里的代码，那就是css代码，浏览器就是这样来进行解析的
-
（1）采用
<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link> -
rel是relationship的英文缩写 stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思 rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
第三种：链接进来css文件：
<head>
<meta charset="utf-8">
<title>链入外部文件来修改样式</title>
<!-- <link rel="stylesheet" type="text/css" href="file:///D:/系统固有/文档/HBuilderProjects/csspractice/css/css-01.css"/> -->
<link rel="stylesheet" type="text/css" href="css/css-01.css"/>
</head>
<body>
<a href="http://www/baidu.com">百度</a>
<span id="baiduSpan">点击链接到百度</span>
</body>
list-style-type一般都要设置为none：
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li>
中国
<ul>北京</ul>
<ul>上海</ul>
<ul>重庆</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
绝对定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的绝对定位</title>
<style type="text/css">
#div1{
background-color: red;
border:1px black solid;
width:300px;
height:300px;
position: absolute;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
