写代码啦
HTML基础知识
回复数(0) 浏览数(10)
{{topic.upvote_count || 0}} 编辑 回复

HTML5概述

在HTML5中,有几点需要注意:
1. HTML中不区分大小写;
2. 在属性中,引号可写可不写,可双引号也可是单引号
例如id=a 和id = ‘a’,id="a"没有任何区别
只有在id里面有空格是需要加引号 例如:class = "a b";
3. ,后面的反斜杠可不加

HTML基本标签

header 头部
div 块
main 主要内容
h1~h6 一级到六级标题
section 章节
aside 旁支内容
footer 脚部
&copy 版权声明

全局属性

  1. class 可以添加多个class,用空格隔开,需要用引号括起来
  2. contenteditable 添加该属性可以实现在网页省直接对内容进行编辑
  3. hidden 隐藏,让内容不再页面上显示
  4. id=xxx 表示全局变量的唯一标签
  5. style作为行内样式,其优先级高于css中的style属性设置
  6. tabindex 控制tab的轨迹,tabindex=0 表示最后一个访问,tabindex=-1 表示不访问
  7. title 如果内容较多用省略号,可以将添加title属性,title=“省略内容”,将鼠标放在省略号上就可以显示省略的内容

单行文字溢出该怎么办?

style{
    white-space:nowrap;/*换行*/
    text-overflow:ellipsis;/*省略部分用省略号*/
    overflow:hidden;/*溢出省略*/
}

利用css对页面进行reset(去掉一些原样式)

*{
margin:0;
padding:0;
box-sizing:border-box;
}
*::after,*::before{
box-sizing:border-box;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
a{
text-decoration:none;
}
ul,ol{
list-style:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}

## 内容标签
1. ol+li
2. ul+li
3. dl+dt+dd
HTML 中多个空格或者换行只能显示为一个空格
4. 用

标签括起来可以让多个空格或换行正常显示
5. 在页面中显示代码
6. hr 分割线
7. br 换行
8. a 添加超链接
该属性表示连接从新窗口打开
9. 对内容的强调,显示斜体
10. 加粗
11. 内联引用
12.
快引用

HTML重点标签

a标签

属性有
* href = "url"
可选值
1. 网址:
https://google.com;
http://google.com;
google.com
2. 路径
/a/b/c.html 或者a/b/c.html
3. 伪协议
JavaScript:代码;
mailto:邮箱
tel:电话号码
4. id = "#xxx"
(用 http-server -c-1 打开网页)
* target
可选值
1. _blank 在新窗口打开
2. _self 在当前窗口打开
3. _parent 在父元素中打开
4. _top 在顶级元素中打开
* download
* rel = noopener

table 标签

table标签中包含的几种 标签
1. thead
2. tbody
3. tfoot
4. tr 表示行
5. td 表示列
6. th 和td一样但是表示表头,自动加粗
几种相关样式
1. table-layout 可选值auto(宽度随字的多少变化)/fixed(宽度固定)
2. border-collapse:collapse(表格合并)
3. border-spacing:0px ;表格间隔为0px;

img标签

作用:发出get请求,展示一张图片
属性:
* alt:如果标签显示失败可以用alt后面的文字代替显示
* height:设置图片高度
* width:设置图片宽度
* src=:图片来源
* onload: 下载成功
* onerror :下载失败

<img id="xxx" width =400 src = "dog.png" alt="一只狗">
<script>
xxx.onload = function(){
console.log("图片加载成功");};
xxx.onerror = function{
console.log(“图片加载失败”);
};
</script>

form标签

作用:发get或者post请求,然后刷新页面



属性
1. action:get或者post到action后面的页面
2. method:get或者post
3. autocomplete :on 指input元素能否拥有一个默认值,此默认值浏览器自动补全
off:需要输入一个显性默认值
4. target:指向要刷新的页面

input

type的可选值有
1. text:文本
2. color:选色版
3. password:密码
4. radio:单选


name必须一致
5. checkbox 多选 name必须一致
6. file上传文件
只能选择一个文件
可以选择多个文件
7. hidden看不见

多行文本
生成可以拖动变换大小的文本区域
如果不想拖动变化大小
设置 style = "resize:none;width:50%;height:300px;"

下拉菜单

星期一
星期二

本文版权有本人和饥人谷所有

{{topic.upvote_count || 0}}

HTML5概述

在HTML5中,有几点需要注意:
1. HTML中不区分大小写;
2. 在属性中,引号可写可不写,可双引号也可是单引号
例如id=a 和id = ‘a’,id="a"没有任何区别
只有在id里面有空格是需要加引号 例如:class = "a b";
3. ,后面的反斜杠可不加

HTML基本标签

header 头部
div 块
main 主要内容
h1~h6 一级到六级标题
section 章节
aside 旁支内容
footer 脚部
&copy 版权声明

全局属性

  1. class 可以添加多个class,用空格隔开,需要用引号括起来
  2. contenteditable 添加该属性可以实现在网页省直接对内容进行编辑
  3. hidden 隐藏,让内容不再页面上显示
  4. id=xxx 表示全局变量的唯一标签
  5. style作为行内样式,其优先级高于css中的style属性设置
  6. tabindex 控制tab的轨迹,tabindex=0 表示最后一个访问,tabindex=-1 表示不访问
  7. title 如果内容较多用省略号,可以将添加title属性,title=“省略内容”,将鼠标放在省略号上就可以显示省略的内容

单行文字溢出该怎么办?

style{
    white-space:nowrap;/*换行*/
    text-overflow:ellipsis;/*省略部分用省略号*/
    overflow:hidden;/*溢出省略*/
}

利用css对页面进行reset(去掉一些原样式)

*{
margin:0;
padding:0;
box-sizing:border-box;
}
*::after,*::before{
box-sizing:border-box;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
a{
text-decoration:none;
}
ul,ol{
list-style:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}

## 内容标签
1. ol+li
2. ul+li
3. dl+dt+dd
HTML 中多个空格或者换行只能显示为一个空格
4. 用

标签括起来可以让多个空格或换行正常显示
5. 在页面中显示代码
6. hr 分割线
7. br 换行
8. a 添加超链接
该属性表示连接从新窗口打开
9. 对内容的强调,显示斜体
10. 加粗
11. 内联引用
12.
快引用

HTML重点标签

a标签

属性有
* href = "url"
可选值
1. 网址:
https://google.com;
http://google.com;
google.com
2. 路径
/a/b/c.html 或者a/b/c.html
3. 伪协议
JavaScript:代码;
mailto:邮箱
tel:电话号码
4. id = "#xxx"
(用 http-server -c-1 打开网页)
* target
可选值
1. _blank 在新窗口打开
2. _self 在当前窗口打开
3. _parent 在父元素中打开
4. _top 在顶级元素中打开
* download
* rel = noopener

table 标签

table标签中包含的几种 标签
1. thead
2. tbody
3. tfoot
4. tr 表示行
5. td 表示列
6. th 和td一样但是表示表头,自动加粗
几种相关样式
1. table-layout 可选值auto(宽度随字的多少变化)/fixed(宽度固定)
2. border-collapse:collapse(表格合并)
3. border-spacing:0px ;表格间隔为0px;

img标签

作用:发出get请求,展示一张图片
属性:
* alt:如果标签显示失败可以用alt后面的文字代替显示
* height:设置图片高度
* width:设置图片宽度
* src=:图片来源
* onload: 下载成功
* onerror :下载失败

<img id="xxx" width =400 src = "dog.png" alt="一只狗">
<script>
xxx.onload = function(){
console.log("图片加载成功");};
xxx.onerror = function{
console.log(“图片加载失败”);
};
</script>

form标签

作用:发get或者post请求,然后刷新页面



属性
1. action:get或者post到action后面的页面
2. method:get或者post
3. autocomplete :on 指input元素能否拥有一个默认值,此默认值浏览器自动补全
off:需要输入一个显性默认值
4. target:指向要刷新的页面

input

type的可选值有
1. text:文本
2. color:选色版
3. password:密码
4. radio:单选


name必须一致
5. checkbox 多选 name必须一致
6. file上传文件
只能选择一个文件
可以选择多个文件
7. hidden看不见

多行文本
生成可以拖动变换大小的文本区域
如果不想拖动变化大小
设置 style = "resize:none;width:50%;height:300px;"

下拉菜单

星期一
星期二

本文版权有本人和饥人谷所有

10
回复 编辑