HTML Learning
1. an easy demo for HTML code:
<!DOCTYPE html>
<html lang="zh-CN"> <!-- 设定HTML语言中文简体 -->
<head>
<!-- meta配置网页元信息-->
<meta charset="UTF-8"/> <!-- 指定浏览器解码方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- 解决IE浏览器兼容性问题 -->
<meta name="viewpoint" content="width=device-width, initial-scale=1.0"/> <!-- 设定移动端 -->
<meta name="keywords" content="1,2,3,4"/> <!-- 指定网页关键字，用英文逗号隔开 -->
<meta name="description" content="a brief description"/> <!-- 网页主要内容，80字以内 -->
<meta name="author" content="someone"/> <!-- 网页作者 -->
<title>网页标题</title>
</head>
<body>
<!-- 这是注释 -->
<input type="password"> <!-- type是标签的属性 -->
<p>这是段落1。</p>
<p>这是段落2。</p>
</body>
</html>
2. some elements of HTML
<h1> to <h6>: 定义 HTML 标题。
<head>: 包含文档的元数据/信息。
<meta>: 定义关于 HTML 文档的元数据。
<template>: 定义用作容纳页面加载时隐藏内容的容器。
<div>: 定义文档中的节（片段）。
<pre>：元素中的文本按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符都会显示出来。
语义化：标签默认效果不重要（效果可以使用CSS设定），标签语义最重要
3. 块级元素与行内元素
块级元素：独占一行，内部可以写行内元素。eg <p>, <h1>, <div> 行内元素：不独占一行, 内部不能写块级元素。eg <input>, <span>, h1-h6不能相互嵌套，p中不能写块元素
4.文本标签
| 标签名 | 标签语义 |
|---|---|
| em | 要强调的内容，斜体 |
| strong | 要强调的内容，粗体 |
| span | 没有语义，用于包裹容器的通用容器，后期可用CSS设定格式 |
| del/ins | 删除的文本和插入的文本 |
| sub/sup | 下标和上标 |
5.绝对路径与相对路径
.say { color= red; /* 类选择器，前面要加. 且不能是纯数字 / } .big { font-size= 20px; } #mystyle { color= red; / ID选择器，前面要加# 且不能数字开头 */ } 111 html
网络绝对路径：多用
6.超链接和锚点
<a href="url" target="_blank" download="filename">跳转</a> <!-- href属性为跳转地址，target属性有_blank和_self两个选项，download属性强制触发下载 -->
<a herf="#maodian">跳转至锚点</a>
<a name="maodian">222</a>
<p id="maodian">222</p> <!-- 更推荐 -->
7.列表
- 有序列表（Ordered list）<ol>：
<body>
<ol>
<li>step one</li> <!-- li作为子元素 -->
<li>step two</li>
</ol>
</body>
- 无序列表（Unordered list）<ul>：
<body>
<ul>
<li>武汉</li>
<li>
<span>上海</span>
<ul>
<li>外滩</li> <!-- 列表可以嵌套 -->
<li>东方明珠</li>
</ul>
</li>
</ul>
</body>
- （自）定义列表（Definition list）<dl>
<body>
<dl>
<dt>术语名称</dt> <!-- dt是第一级 dd是次级 -->
<dd>术语描述</dd>
</dl>
</body>
8.表格
table：表格 caption：表格标题 thead：表格头部 tbody：表格主题 tfoot：表格注脚 tr：表格行 th, td：每个单元格，其中th是表头的单元格，td是表格主题和注脚的单元格
9.表单
| 标签名 | 标签语义 | 常用属性 |
|---|---|---|
| form | 表单 | action：指定表单的提交地址 target：表单提交后如何跳转页面，_blank, _selfmethod：请求方式，两种get和post |
| input | 输入框 | type：设置输入框的类型 name：指定提交数据的名字 maxlength：指定最大输入值的长度value：指定输入框默认值 |
| button | 按钮 |
eg：
<body>
<form action="url" target="_self" method="get">
<input type="text" name="xxx">
<button>Search</button>
<label for="zhanghu">账户：</label> <!-- label for属性和输入框id属性做关联，获取焦点 -->
<input id="zhanghu" type="text" name="account" value="default" maxlength="10"> <br>
<label>
密码：<input type="password" name="pwd"> <!-- 做关联的第二种方法 -->
</label>
性别：
<label>
<input type="radio" name="gender" value="male" checked>male <!-- 单选框，二选一, 属性checked是默认选项 --></label>
<label>
<input type="radio" name="gender" value="female">female</label> <br>
爱好：
<input type="checkbox" name="hobby" value="smoke">抽烟 <!-- 多选框 -->
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头 <br>
<!-- 隐藏域 -->
<input type="hidden" name="tag" value="123"> <!-- 隐藏域，用户不可见输入去，提交表单时携带一些固定数据，可以规避一些非法请求 -->
籍贯：
<select name="place">
<option value="1" selected>北京</option> <!-- selected是默认选项 -->
<option value="2">河北</option>
</select>
<button>确认</button> <!-- 默认type="submit"即提交表单 -->
</form>
</body>
表单分类fieldset与legend，fieldset可以为表单控件分组，legend决定分组的标题
<fieldset>
<legend>附加信息</legend>
爱好：
<input type="checkbox" name="hobby" value="smoke">抽烟 <!-- 多选框 -->
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头 <br>
籍贯：
<select name="place">
<option value="1" selected>北京</option>
<option value="2">河北</option>
</select>
</fieldset>
10.HTML字符实体(entity)
是空格符，non-braking space
11.HTML全局属性
| 属性名 | 含义 |
|---|---|
| id | 给标签指定唯一标识，一个html内id不能重复。不能用数字开头。不能在以下标签使用：<head>, <html>, <meta>, <script>, <style>, <title> |
| class | 给标签指定类，可以使用CSS类选择器为其设置样式 |
| style | 给标签设置CSS样式 |
| dir | 内容出现的位置，值 ltr，rtl。不能在以下标签使用：<head>, <html>, <meta>, <script>, <style>, <title> |
| title | 给标签内容设置悬浮提示 |
| lang | 给标签设定语言 |