HTML阶段HTML概念Hyper Text Markup Language 超文本标记语言超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件、超链接等。标记:也可以称为标签,用<>括起来的一个特定单词,整体称为标记或标签,分为单标签和双标签。单标签:<单词/>双标签:<单词>单词>标签的类型块级元素,占页面中的一整行。block行内元素,占一行中的一部分。inline标签的属性标签第一个中括号中,使用 属性=“值” ,让某个标签拥有特定属性。如
中,charset="utf-8"就是meta标签的属性chartset称为属性名,utf-8称为属性值。如果有多个属性,使用空格隔开。如
。网页基本结构
网页标题
网页主体
创建一个文本文档,将以上内容进行保存,文档的后缀名改为.html,用浏览器就能解释运行。HTML注释
页面种显示颜色的方式颜色单词,如red、blue、green等颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色,数字范围[0,255],值越大,对应的颜色越深颜色的十六进制RGB。#FF0000表示红色,相当于RGB(255,0,0)资源的路径常用标签文字标签名作用h1~h6块级元素。标题。文字加粗,1最大,6最小。通常用h1~h3p块级元素。段落。span行内元素。pre块级元素。预处理标签。i行内元素。倾斜。u行内元素。下划线。b行内元素。加粗。sub行内元素。文字下标。sup行内元素。文字上标。以上标签都是双标签Emojo表情 网站用法:复制表情对应的十进制或十六进制的代码,最好使用span显示
⭐
⌛
阿里巴巴矢量图库 网站图片img单标签,行内元素
列表ul/ol/li双标签,块级元素,li是ul或ol的子标签无序列表ul默认每一项前用实心圆符号修饰通过type属性修改符号disc 默认,实心圆circle 空心圆square 正方形none 去掉修饰符号
有序列表ol默认每一项前用自增数字修饰通过type属性修改符号a/A 英文字母i/I 罗马符号1 默认数字none 去掉修饰符号
- xxx
- xxx
- xxx
表格table表格中的标签作用tr表格中的行td每行中的单元格th特殊的单元格,表头,文字加粗居中td可以通过colspan=“3”属性实现跨3列rowspan=“2”属性实现跨2行星期一星期二星期三星期四星期五上午语文数学语文数学语文数学语文数学语文数学午休下午体育音乐自然科技美术音乐体育科技美术自然
|
星期一 |
星期二 |
星期三 |
星期四 |
星期五 |
上午 |
语文 |
数学 |
语文 |
数学 |
语文 |
数学 |
语文 |
数学 |
语文 |
数学 |
午休 |
下午 |
体育 |
音乐 |
自然 |
科技 |
美术 |
音乐 |
体育 |
科技 |
美术 |
自然 |
多媒体音频audio
视频video
controls开启控制器autoplay自动播放loop循环muted静音谷歌浏览器,默认不允许自动播放非静音视频水平线hr
换行br
a标签行内元素,双标签。超链接可以通过a标签访问任何一个地址
点击跳转
target可以控制要访问的资源在哪里打开 _self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
如果是锚点的name,通过“#name“访问如果是iframe的name,通过"name"访问锚点可以通过a标签定义锚点和访问锚点,实现当前页面的快速定位1.设置锚点
2.访问锚点
点击访问锚点
浮动框架iframe
xx
yy
marquee标签
表单和表单元素表单form双标签,用于接收用户输入的数据
form表单有两个重要的属性action:设置提交路径
可以是一个页面,也可以是后台请求映射method:设置提交方式
默认值为get,表示使用get方式提交,提交的数据会暴露在浏览器地址栏中设置为post方式,提交的数据不会暴露在浏览器地址栏中表单元素定义在表单form标签中的标签div标签块级元素,双标签,没有任何特点。页面布局时采用div布局。CSS阶段CSS概念Cascading Style Sheets 层叠样式表用于控制HTML中标签样式的语言。可以精确到像素,美化修饰HTML标签。CSS语法样式名:样式值;color:red;font-size:20px;选择器用于选择页面中元素(标签)的工具。id选择器1.给标签添加id属性,对其命名2.在style标签中通过**#id**名获取通常用于选择某**一个元素
class选择器1.给标签添加class属性,对其命名2.在style标签中通过**.class**名获取通常用于选择**一组元素
元素/html/标签选择器直接通过标签名获取。通常用于选择一组元素。
将CSS写在哪里1.写在标签的style属性中style=“样式:值;样式:值;”
2.写在