什么是HTML、CSS?
HTML (HypeText Markup Lanage):超文本标记语言。
超文本:超过了文本的限制,比普通的文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
标记语言:由表签构成的语言
HTML 标签都是提前预定义好的。例如:使用<a>展示超链接,使用<img>展示图片,<vedio>展示视频。
HTML代码直接在浏览器中运行,HTML标签解析。
CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。
特点:
• HTML标签不区分大小写
• HTML标签属性值单引号双引号都可以
• HTML语法松散
新闻排版-标题排版
图片标签:<img>
src:指定图像的url(绝对路径/相对路径)
width:图像的宽度(像素/相对于父元素的百分比)
height:图像的高度(像素/相较于父元素的百分比)
标题标签:<h1>-<h6>(重要程度依次减低)
水平标签:<hr>
. / :当前目录,. / 可省略
.. / :上一级目录
标题样式
CSS引入方式:
• 行内样式:写在标签的style属性中(不推荐)
• 内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
• 外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入)
颜色表示形式:
CSS选择器: 用来选择需要设置的样式(标签)
优先级:id选择器>类选择器>元素选择器
<span>标签
<span>是一个在开发网页时会大量用到的没有语义的布局标签
特点:一行可以显示多个(组合行内元素,宽度和高度默认由内容撑开)
超链接标签:<a href=""></a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开
text-decoration:规定添加到文本的修饰,none表示定义标准的文本。
视频标签:<video>
• src:规定视频的url
• controls:显示播放控件
• width:播放器的宽度
• height:播放器的高度
音频标签:<audio>
• src:规定音频的url
• controls:显示播放控件
段落标签:<p>
文本加粗标签:<b>/<strong>
换行:<br>
段落:<p>
文本加粗:<b> <strong>
line-height:设置行高
text-indent:定义第一行的内容的缩进
text-align:规定元素中的文本的水平对齐方式
在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符: ;
盒子模型组成:
内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
页面布局:
布局标签:实际开发网页中,会大量使用div和span这两个没有语义的布局标签
标签:<div><span>
特点:
div标签:一行只显示一个(独占一行)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高(width、height)
span标签:一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高(width、height)
注意:如果需要设置某一个方位的边框、内边距、外边距,可以在属性后面加上-位置,如:padding-top、padding-left、padding-right...
表格标签
<table>:定义表格
<tr>:定义表格中的行,一个<tr>表示一行
<th>:表示表头单元格,具有加粗居中的效果
<td>:表示普通单元格
场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表
标签:
表单标签
场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。
标签:<form>
表单项:不同类型的input元素、下拉列表、文本域等
<input>:定义表单项,通过type属性控制输入形式
<select>:定义下拉列表
<textarea>:定义文本域
属性:
action:规定当提交表单时向何处发送表单数据,URL 如果不指定,默认提交到当前页面
method:规定用于发送表单数据的方式。GET(在url后面拼接表单数据,比如:?username=Tom&age=12,url长度有限制 默认值)、POST(在消息体中传递的,参数大小无限制)
注意:表单项必须有name属性才可以提交
表单标签-表单项
<input>:表单项,通过type属性控制输入形式
<select>:定义下拉列表,<option>定义列表项
<textarea>:文本域