Html5

text::JavaScript

Html教程

Html教程

web 入门 - 学习 Web 开发 | MDN (mozilla.org)

教师网站

编辑器HbuildX（ctrl + /：注释）

一、基础

html5新增

1 基础知识

html 知识

html只做格式，不做样式！

xhtml：W3C 制定的，因学习成本高，严格化很少人用。

html5：大公司联合制作，市场常用，后被 W3C 收纳。

html + xml = xhtml（html + css + js）（1.0已淘汰xhtml）

strict：严格语法。

transitional：过渡型，可出错，市面上大部分标准都是这个。

frameset：框架型。

浏览器模式：兼容（兼容以前的网页，慢），标准（更快）。

判断方式：头<!DOCTYPE>，不写默认兼容

浏览器显示不安全：使用的 http 协议而非 https 协议。（https要钱）

XML知识

<!--XML：可扩展标记语言（xml有严格语法要求，可自定义标签便于机器识别）-->
<?xml version="1.0" ?>
<书>
    <价格>56</价格>
</书>

元素类型

元素类型	特点
块级元素	所占区域是整块，可设置宽高，自动换行（小间隙）
行内元素	所占区域按内容大小来，不可设置宽高，不自动换行
行内块状元素	可设置宽高，不自动换行
锚点	回到页面的某一处

2 基础语法

注意事项

双标签必须闭合。

所有标签都是小写。

值必须用 “ value “，包裹。

控件错误将会被解析成文本框。（浏览器默认文本框最保险。）

<!--html5单标签可以无 / ，xhtml必须有-->
<标签名 />
<标签名 属性名="属性值" [属性名="属性值"] />

<!--双标签-->
<标签名></标签名>
<标签名 属性名="属性值" [属性名="属性值"] ></标签名>


<!--整体结构-->
<!--网页体-->
<html></html>

<!--头部-->
<head></head>

<!--身体（浏览器可见内容）-->
<body></body>

3 基本样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">  
		<title></title>
 		<link rel="stylesheet" href="引入的css文件的路径" />
		<script src="引入的js文件的路径" type="text/javascript" charset="utf-8"></script>        
	</head>
	<body></body>
</html>

<!--
<!DOCTYPE html>：声明版本html5
<title></title>：页面标题，收藏网页的默认名
<meta>：头属性设置
<html lang="zh-CN">：中文网页不要写 en，不然浏览器会提示你是否翻译网页成中文（即使写的中文）。
VScode中：! + Enter：快速生成html简单格式
-->

二、标签

1 单标签

1.1 水平线

<hr />

属性：width，size，align

1.2 换行

<br />

行内元素

1.3 图片

<img />

插入图片，行内元素

属性：src，title，alt，border，align，width，height（大小不建议大改，要大改直接改原图）

1.4 表单元素

<input />

行内元素，不一定放入表单中，但提交必须放入表单中。

属性：type，value，readonly，maxlength，disabled

requried（一般不用，用 JS 实现）

2 双标签

2.1 格式化标签

<!--设置字体相关属性-->
<font></font>
<!--属性：color，size，face-->

<!--伪样式-->
<!--与旁边区分,加粗，行内元素-->
<b></b>
<!--强调，行内元素（W3C加的）-->
<strong><strong>
<!--与旁边区分,斜体-->
<i></i>
<!--次级强调，斜体（W3C加的）-->
<em></em>
    
<!--下划线-->
<u></u>
<!--中划线-->
<del></del>
<!--下标-->
<sub></sub>
<!--上标-->
<sup></sup>

<!--长引用-->
<blockquote></blockquote>
<!--短引用-->
<q></q>
<!--缩写-->
<abbr>
<!--作者联系信息-->    
<address>	
<!--预格式化文本-->    
<pre>	
<!--代码-->
<code>
<!--删除的文本-->
<del>

2.2 普通文本

2.2.1 字体

<!-- n in [1,6] h1最大（会作为浏览器权重），hh6最小-->
<h1></h1>
<h6></h6>
<!--大小依次递减。
不建议在网页中写多个<h1>标签，<h1>标签可以被搜索引擎获取，如果有多个可能会进入搜索引擎黑名单。（其他随意）
快速生成多个的写法：h${ title$ }*6——tab-->

<!--abbr，标记缩写词，配合 title 使用-->
The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

2.2.2 段落

<!--一段话，（所占区域是整块），自动换行（间隙比换行标签大）-->
<p></p>

<!--定义预格式化文本，保留设置时的空格和换行符，文本呈现等宽字体-->
<pre></pre>

2.2.3 层

<!--层，块级元素（所占区域是整块，自动换行（小间隙）），用于布局-->
<div></div>
<!--层，行内元素（所占区域按内容大小来，不自动换行）-->
<span></span>

2.2.4 按钮

相较表单元素可以插入内容在标签中

属性：disabled，type，value，name

tips：type默认是提交按钮

<!--行内元素-->
<button></button>

2.3 格式文本

2.3.1 列表

<!--无序列表-->
<ul></ul>
<ul>
    <li></li>
</ul>
<ul>
<!--属性：type（列表前的标识）（1.square（实心方块），2.circle（空心圆），3.disc（实心圆），4.decimal（小数）-->

<!--有序列表-->  
<ol></ol>
<ol>
    <li></li>
</ol>
<ol>
<!--属性：type（列表前的标识）（分为1（默认），a，A，i，I）-->

<!--自定义列表-->
<dl></dl>
<dt> <!--标题-->
<dd> <!--内容-->
    
<!-- 列表嵌套 -->
<ul>
    <li>姓名
        <ol>
            <li>mio</li>
            <li>mugi</li>
        </ol>
    </li>
    <li>性别
        <ul>
            <li>男</li>
            <li>女</li>
        </ul>
    </li>
</ul>

2.3.2 表格

<!--表格-->
<table></table>
<!--属性：align，border，width，height，style，colspan，rowspan-->
<!--普通边框：style="border-collapse: collapse;"-->

<!--行-->
<tr></tr>
<!--属性：align，valign，bgcolor-->

<!--表头单元格-->
<th></th>

<!--标准单元格-->
<td></td>
<!--属性：rowspan，colspan-->

2.3.3 文本域

<!--行内元素，一块文本-->
<textarea></textarea>
<!--属性：rows，cols-->

2.3.4 文本聚焦

<!--行内元素，用于绑定多个元素。-->
<label></label>
<label>username<input/></label>
<!--属性：for-->

2.3.5 下拉框

<!--下拉框，行内元素-->
<select></select>
<!--属性：name，multiple，size，disabled-->

<!--框中元素-->
<option></option>
<!--属性：selected，disabled，value-->
<!--value：提交给服务器的选项值，没有该属性则提交标签中的值-->

2.3.6 包裹框

<!--包裹框，将内容用一个框进行包裹-->
<fieldset></fieldset>
<!--在包裹框线处显示文字-->
<legend></legend>

<fieldset>
<legend>个人信息:</legend>
  姓名: <input type="text"><br>
</fieldset>

2.4 链接

2.4.1 超链接

<!--设置超链接，行内元素-->
<a></a>
<!--属性：href，target，name，title-->

2.4.2 表单

属性：

novalidate：添加后取消表单的自动验证。

<!--向服务器传输数据，块级元素-->
<form></form>
<!--属性：action，method，name，target-->
<!--上传文件时设置：enctype="multipart/form-data" method="post"-->

2.5 HTML5

2.5.1 input

<input type="" />
<!--type：url，email，number，range，date，search（会影响手机输入法的顶部提示）-->

2.5.2 内联标签

<!--网页里套网页-->
<iframe></iframe>
<!--属性：src-->

2.5.3 格式标签

<!--（Navigation）小型的页面内导航-->
<nav></nav>

<!--页眉-->
<header></header>

<!--页脚-->
<footer></footer>

<!--内容-->
<article></article>

<!--侧边栏-->
<aside></aside>

3 属性

3.1 通用

属性	作用
id	标识元素的唯一性，多用于前端判断。最好唯一，以字母、数字、下划线、中划线组成，不以数字开头
name	提交数据时的参数名，多用于后端判断。同一标签有同一name值为一组（例如性别设置）
style	设置元素的行内样式（具体的样式）
calss	设置元素的样式名
disabled	禁用

3.2 颜色

bgcolor属性

text属性

/*背景*/
bgcolor="value"
/*文本*/
text="value" 

/* value有三种：颜色名："blue"，rgb："rgb(255,0,0)"，十六进制："#ff0000" */

3.3 样式

/*宽度*/
width="value"
/*高度*/
height="value"
/*行长*/
cols="value"
/*列长*/
rows="value"
/*大小*/
size="value"
/*边框宽度*/
border="value"
/* value：百分比("25%")，px("500px") */

/*上下对齐方式。value："top"*/
valign="value"
/*左右对齐方式。value："left"，"right"，"center"（默认），"justify"（两端对齐）*/
align="value"


/*字体样式。name：字体名字*/
face="name"
/*样式风格。name：格式名字*/
style="name"
style="clear:both;"  /* 清除浮动 */

/*鼠标悬停时文字。characters：内容*/
title="characters"

/*占用格子数（纵向，横向合并）。num：占用格子数*/
rowspan / colspan="num"

3.4 链接

/*路径。指向资源路径，可以是本地路径，可以是超链接。本地可以是：磁盘路径（写这个会从客户端的磁盘开始找），绝对路径（以"/"开头，例："/images/..."），相对路径。*/
src="path"

/*显示错误。characters：内容*/
alt="characters"

3.5 超链接

/*链接*/
href="url"
/* href=""或"#"时当做顶部锚点使用，"#name"可让该链接回到指定名字处，url 同 path。可以是邮件，如 mailto@163.com */

/*打开方式*/
target="value"
/* value：_self：当前窗口（默认，用于顺序访问结构），_blank：新窗口（用于平行访问结构），_parent：父窗口，_top：顶级窗口。如果当前页面是在一个iframe中打开的，使用"_parent"会在iframe的父级页面中打开链接，而使用"_top"会在整个浏览器窗口中打开链接。*/

/*数据名字。name：提交数据的参数名*/
name="name" /*或 id="name"*/

/*鼠标放置提示*/
title="title"

/*提交地址*/
action="url"

/*提交方式。value：get，post*/
method="value"

3.6 表单元素

/*元素类型*/
type="value"
/*value：
text（文本框），password（密码框），radio（单选框），checkbox（复选框），file（文件），hidden（隐藏域），botton（普通按钮），submit（提交按钮），reset（重置按钮），date（日期框）
radio（单选框），checkbox（复选框）：用name选定组
hidden（隐藏域）：看不见，但是可提交数据*/

/*元素默认值*/
value="value"
/*最大长度：*/
maxlength="num"

/*聚焦对象。id填聚焦对象的id*/
for="id"

/*可多选*/
multiple="multiple"
/*禁止提交*/
disabled="disabled"
/*只读：*/
readonly="readonly"
/*默认选中项*/
selected="selected"