2.1HTML
2.1.1创建第一个html文件
2.1.2HTML文档结构
HTML文档主要由四个主要标记构成，分别是<html>、<head>、<title>、<body>，这是HTML页面最基本的元素。且这四个标记需要成对使用。eg:<html></html>......
1.<html>标记
<html>标记是所有HTML文件的开头。HTML所有标签都需要放在<html>标签之中。
2.<head>标记
<head>标记是HTMl的头部标记，<title>标记在<head>标记之中。
3.<body>标记
<body>标记是HTML文件的主体标记，页面的所有内容都定义在<body>标记之中。
2.1.2HTML常用标签
1.换行标记 <br> 不一定成对出现。
上述代码输出结果为：
其中<br>标签的作用是进行换行操作
2.段落标记 <p></p> 也不用成对出现
段落标记的作用是在段前（<p>）或者段后(</p>)添加一个空行，<p></p>之间的文字输出不受影响，实现效果可以参考前面两张图
3.标题标记<h1>-<h6>
其中<h1>代表一级标题，后面以此类推，数字越小表示等级越高，其文字字体越大
上述代码输出结果为：
4.居中标记<center></center>
居中标记之中的内容居中显示，参考代码如下：
上述代码运行结果如下：
5.文字列表标记
（1）无序列表
无序列表是在每行列表的前面添加一个圆点符号，由<ul></ul>创建，其中每个列表以<li>表示，具体代码如下：
运行结果为：
（2）有序列表
有序列表可以将表项进行排号，有序列表的标记为<ol></ol>，每个列表项前使用<li>,具体代码如下：
代码运行结果为：
2.1.4HTML表格标记
表格用来存储数据。表格包含标题、表头、行和单元格。在HTML中使用<table></table>标记定义表格，但是定义一个完整的表格还不够，还需要定义表格中的行、列、标题等内容。
（1）表格标记<table></table>
<table>标记中还具有很多其他属性，例如：width表示用来设置整个表格的宽度，height属性用来设置整个表格的高度，boeder属性用来设置整个表格的边框，align用来设置表格的对齐方式，bgcolor属性用来设置表格的背景颜色。
（2）标题标记<caption></caption>
标题标记也有一些其他属性，例如align、valign属性
（3）表头标记<th></th>
表头标记也有一些其他属性，例如：align、background、colspan、valign属性等
（4）表格行标记<tr></tr>
一组<tr>标记表示表格中的一行，<tr>标记要嵌套在<table>标记中使用，该标记也有align、background、等属性
（5）单元格标记<td></td>
单元格标记又称列标记，一个<tr>标记可以嵌套多个<td>标记，该标记也具有align、background、valign等属性。
上述标记的具体使用如下：
其运行结果如下：
2.1.5HTML表单标记
在登录页面中，网站会提供用户名文本框和密码文本框以供访问者输入信息，此相互用户文本框和密码文本框就属于HTML中的表单元素。
1.<from>..</from>表单标记
在表单标记中，可以定义处理表单数据程序的url地址，其基本语法如下：
<from action="url" method="get/post"name=“name”onSubmit=““”target=“”> </from>
由于为初学者具体属性就不做解释。建议自学
(17条消息) HTML表单标签＜form＞＜/form＞，保证看完就懂_</form>_极具浪漫主义色彩的菜鸟学习之路的博客-CSDN博客
2.<input>表单输入标记
建议自学
(17条消息) 表单标签＜input＞的介绍_input标签_Q _Q的博客-CSDN博客
3.<select></select>下拉菜单标记
使用<option>标记项列表中添加内容。
基本结构：
<select name="name"size="数字"multiple=”multiple“disable=”diaable“>
</select>
属性解释：
具体代码：
运行结果：
4.<textarea>多行文本标记
一般情况下<textarea>出现在<form>标签之中
基本格式及属性说明如下：
具体代码如下：
运行结果为：
可以在运行出的文本框中输入内容
2.1.6超链接与文本标记
1.超链接标记<a>
实现网站中一个页面跳转到另一个页面的功能。
基本语法结构：
<a href=""></a>
属性href用来设定连接到哪一个页面中。
2.图像标记<img></img>
具体语法结构和属性解释如下图：
具体代码如下：
运行结果为：
由于我输入的图片文件的路径有问题，无法显示出图片
2.2CSS
CSS包含三部分的内容：选择符、属性和属性值。
具体说明如下：
2.2.2CSS选择器
1.标记选择器
CSS标记选择器就是说明HTML页面中哪些标记采用哪些CSS样式。例如，a选择器，就是用于声明页面中所有 <a>标签样式风格。
具体代码如下：
运行结果如下：
2.类别选择器
可以实现同类型的不同标签实现不同样式的输出
具体代码如下：
运行结果为：
3.ID选择器、
命名ID 选择器要以#开始，后面加上HTML标记中的ID属性值
具体代码如下：
运行结果如下：
2.2.3在页面中包含 CSS
1.行内式
直接定义在HTML标记内，通过style属性来实现。
具体代码如下：
运行结果为:
2.内嵌式样式表
在页面中使用<style></style>标记将CSS样式包含在页面内。
具体代码如下：
运行结果为：
3.链接式样表
链接外部CSS是常用的一种引用样式表的方法，将CSS样式定义在一个单独的文件中，然后再HTML页面中通过<link>标记引用，<link>标记语法如下：
<link rel="stylesheet"href=”path“typr="text/css">
参数说明如下：
①rel：定义外部文档和调用文档的关系
②href：CSS文档的绝对或者相对路径
③type：外部文件的MIME类型
具体代码如下：
（1）创建名称为css.css的样式表，在该样式表中定义页面中<h1>、<h2>、<h3>、<p>标记的样式代码
（2）在页面中通过<link>标记将CSS引入页面，此时CSS定义的内容将自动加载到页面中，具体代码如下：
我的文件名称是自己创的，不是css.css
扫一扫
1714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
