本文详细介绍了HTML的基本结构和常用标签，包括字体、特殊字符、标题、超链接、列表、图片、iframe及表单的使用。同时，讲解了CSS的三种用法和选择器，包括标签选择器、ID选择器和类选择器，用于实现网页的样式设计和布局。通过实例展示了如何创建和控制网页的外观和交互效果。
目录
1.简介
页面由三部分组成：内容、结构、行为。
内容（结构）：页面中看到的数据，我们一般用html技术表示。
表现：指内容在页面上的展现形式（如布局，颜色），用css技术实现。
行为：页面中的元素与输入设备交互的响应，用javascript来实现。
2.HTML书写规范
<!DOCTYPE html><!--约束，声明 -->
<html lang="en"><!--html标签表示html的开始 lang = "zh_CN"表示中文 html标签中一般发扽为两部分，分别是：head和body -->
<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
<meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
<title></title>
</head>
<body>`<!--body标签是整个html页面显示的主题内容 -->`
</body>
</html>
3.HTML标签介绍
标签的格式：
<标签名>封装的数据</标签名>
标签名大小写不敏感。
标签拥有自己的属性（分为基本属性，事件属性）
基本属性：bgcolor = “red”
事件属性：onclick = “alert(‘你好’)”
标签分为单标签，双标签
单标签<标签名/>
双标签<标签名></标签名>
3.1 font标签
<body>
<!--body标签是整个html页面显示的主题内容 -->
<!-- font 标签是字体标签 可以修改文本的字体 ，颜色、大小（尺寸）-->
<font color = "red" face = "黑体" size = "7">happy study</font>
</body>
3.2 特殊字符
<body>
<!--特殊字符 -->
<!--test把<br> 换行标签变成文本 转换成字符显示在页面上-->
我是<br>标签
<!--空格-->
</body>
3.3标题标签
标题标签h1到h6
<body>
<!--align 属性是对齐属性 left:左对齐 center：居中 right：右对齐-->
<!-- 标题标签-->
<hi align = "left">标题1</hi>
<h2 align = "center">标题2</h2>
<h3 align = "right">标题3</h3>
</body>
3.4超链接
<body>
<!--超链接
href属性设置连接的地址
target属性设置目标进行跳转
_self 表示当前页面（默认值）
_blank表示打开的新页面进行跳转
-->
<a href = "http://baidu.com">百度</a>
<a href = "http://baidu.com" target = "_self">百度</a>
</body>
3.5列表标签
ul：无序列表
li：有序列表
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<ul>1</ul>
<ul>2</ul>
<ul>3</ul>
</body>
3.6 img标签
1）img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时，用来代替显示的文本内容
2）web中路径分为两种：
相对路径：
.表示当前文件所在目录
…表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件，相当于./文件名 ./可以省略
绝对路径
http://aaa/工程名/资源路径
3.7 iframe
<body>
<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值。
-->
<iframe src = "img.jpg" width = "500 " height = "400" name = "abc"></iframe>
<br/>
<ul>
<li><a href = "xixihaha.html" target = "abc">xixihaha</a></li>
</ul>
</body>
3.8 表单
<body>
<!--form标签就是表单
input type = text 是文件输入框 value设置默认显示内容
input type = password 是密码输入框 value设置默认显示内容
input type = radio 是单选框 name属性可以对其进行分组 checked = "checked" 表示默认选中
input type = reset 是重置按钮 value属性修改按钮上的文本
input type = submit 是提交按钮
input type = button 是按钮
input type = file 是文件上传域
input type = hidden 是隐藏域
select 标签是下拉框
option 标签是下拉表框中的选项 selected = “selected” 设置为默认选中
texttarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<form>
用户姓名:<input type="text" value = "默认值"/></br>
用户密码：<input type = "password" value = "abc"/></br>
性别：<input type = "radio" name = "sex"/>男<input type = "radio" name = "sex" checked = "checked"/>女</br>
兴趣爱好：<input type = "checkbox" checked = "checked"/>Java<input type = "checkbox" />JS</br>
国籍：<select>
<option>--不如跳舞--</option>
<option selected = "selected" >戴便</option>
</select>
</form>
</body>
3.9 form表单提交的细节
form标签是表单标签，action属性是设置提交的服务器地址
method属性设置提交的方式GET(默认)和post（更安全）
表单在提交的时候，数据没有发送给服务器的三种情况：
1）表单项没有name属性
2）单选、复选（下拉列表的option标签）都需要添加value属性，以便发送给服务器
3）表单项不在提交的form标签中
<body>
<form action = "https://www.baidu.com/" method="post">
<input type = "hidden" name = "acation" value="login"/>
</form>
</body>
3.10 其他标签
div标签：独占一行
span标签：它的长度是封装数据的长度
p段落标签：默认在段落的上方或者下方空出来
4.CSS技术
语法规则：
4.1 第一种用法
在标签的style属性上设置"key；value value；"修改标签样式。
<div style = "border: 1px solid red;"></div>
4.2 第二种用法
在head中定义总体的样式
<head><!-- 表示头部信息，一般包括三部分内容，title 标签，css样式，js代码-->
<meta charset="UTF-8"><!--表示当前页面用UTF-8字符集 -->
<title></title>
<style type = "text/css">
div{
border: 1px soild black;
}span{
border: 1px soild black;
}
</style>
</head>
4.3第三种方法
把CSS样式整合放到一个地方，降低代码复用性
link专门引用CSS标签
<link rel="stylesheet" href="././css/public.css">
4.4 CSS的选择器
4.4.1 标签名选择器
标签名选择器的格式为:
标签名{
属性：值
}
标签名选择器可以决定哪些标签被动的使用这些样式
4.4.2 id选择器
#id选择器的格式为:
标签名{
属性：值
}
4.4.3 class选择器（类选择器）
.class属性值{
属性：值
}
通过class属性有效的选择样式
4.4.4组合选择器
组合选择器的格式
选择器1，选择器2，选择器n{
属性：值
}
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
