前端自学笔记_HTML

HTML

HTML指的是超文本标记语言，它不是编程语言！！！

HTML基本骨架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
 
</body>
</html>

<!DOCTYPE html>: 声明为html5文档
<html>是html页面的根元素
<head>包含了文档的元数据（meta）
<meta>是元数据，这里：<meta charset = “utf-8”>定义了网页编码格式为utf-8
<title>：文档的标题
<body>：body标签包含了页面的可见内容，也就是只有body中的元素在页面中才能看到。

HTML标签：HTML使用标记标签来描述网页，一般标签成对出现，也被称为双标签，第一个标签称为开始标签，后面的标签称为结束标签。

标签关系

HTML中的标签一般有两种关系：父子关系（嵌套关系）与兄弟关系（并列关系）

<body>
	<p>一段文字</p>
	<span>另一端文字</span>
</body>

上面代码中的<body>标签与<p>标签就是父子关系，p标签包含在body标签中
而上面的<p>与<span>标签就是兄弟关系，双方没有嵌套
一般两个直接接触的标签就只有这两种关系了，当然范围放在非直接接触的标签当中就会出现类似于爷孙关系、叔侄关系、七大姑八大姨关系等乱七八糟的关系了(doge)。

HTML属性

HTML元素（元素就是各种标签对）中可以设置属性
属性可以在元素中添加附加信息，
属性一般描述于开始标签
属性总是以键值对的方式出现，如：name=“value”

<a href="http://www.baidu.com">这是一个链接</a>

几乎每个HTML元素都会有的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式

HTML文本

HTML标题<h1>~<h6>

	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

标题标签一般用于新闻标题、文章标题、网页区域名称、产品名称等
h1~h6 6级标题：字体加粗，字号逐渐减小，换行
h1在一个网页中只用一次，用于放新闻标题或者网页logo
h2~h6 没有次数限制

HTML段落<p>

<p>这是一个段落 </p>
<p>这是另一个段落</p>
<p>这个<br>段落<br>演示了分行的效果</p>

<p>标签会自动换行
如果希望在不产生一个新段落的情况下进行换行（新行），可以使用<br>标签（br标签代表换行，类比于\n)

HTML文本格式化

常用文本格式化：

标签	效果
<strong></strong>	strong（加粗）
<b></b>	b（加粗）
<em></em>	em（斜体）
<i></i>	i（斜体）
<ins></ins>	ins（下划线）
<u></u>	u（下划线）
<del></del>	~~del（删除线）~~
<s></s>	~~s（删除线）~~
<sub></sub>	String_{sub（下标）}
<sup></sup>	String^{sup（上标）}

HTML带有URL的标签

HTML链接

<a>链接

<a href="url">链接文本</a>
<a href="https://www.baidu.com/">访问百度首页</a>

图像链接
alt 属性用来为图像定义一串预备的可替换的文本.
在浏览器无法加载图像时，alt属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

<img src="example.jpg" alt="示例图片">

锚点链接
除了链接到其他网页外，还可以在同一页面内创建内部链接，这称为锚点链接。

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

下载链接

<a href="document.pdf" download>下载文档</a>

target属性

<a href="https://www.baidu.com/" target="_blank">新窗口访问百度首页</a>

如果将 target 属性设置为 “_blank”, 链接将在新窗口打开。

HTML头部<head>

<head> 元素包含了所有的头部标签元素。在 head元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title> , <style> , <meta> ,<link> , <script> , <noscript> 和 <base>

style标签
style标签定义了HTML文档的样式文件引用地址.
在style 元素中也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

meta标签
meta标签描述了一些基本的元数据。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<!-- 为搜索引擎定义关键词: -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为网页定义描述内容: -->
<meta name="description" content="HTML自学笔记">
<!-- 定义网页作者: -->
<meta name="author" content="GrassLight">
<!-- 每30秒钟刷新当前页面: -->
<meta http-equiv="refresh" content="30">

link标签
link 标签定义了文档与外部资源之间的关系。

link 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

script标签
script标签用于加载脚本文件，如： JavaScript。

<head>
<script>
	console.log("Hello World!")
</script>
</head>

base标签
base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接标签的开头地址链接:

<head>
<base href="http://localhost:8080/api/" target="_blank">
</head>

HTML表格<table>

表格基本架构：

标签	描述
table	表格
tr	行
th	表头单元格
td	内容单元格

合并单元格：
1.明确合并目标
2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
跨行合并，保留最上的单元格，添加属性rowspan
跨列合并，保留最左的单元格，添加属性colspan
3.删除其他单元格

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <!-- <td>100</td> -->
            <!-- 198直接从第三列开始，若100不注释则一共有四列 -->
            <td>198</td>   
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="3">全市第一</td>
            <!-- <td>全市第一</td>
            <td>全市第一</td> -->
        </tr>
    </tfoot>
</table>

表格边框： 表格默认没有边框线，可以用border属性添加边框线

列表<ul>/<ol>/<dl>

列表分类：

类别	代码	效果
无序列表	<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>	第一项第二项第三项
有序列表	<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>	第一项第二项第三项
自定义列表	<dl> <dt>列表详情</dt> <dd>详情一</dd> <dd>详情二</dd> <dd>详情三</dd> </dl>	列表标题详情1 详情2 详情3

HTML区块<div>和<span>

HTML 可以通过 <div>和<span>将元素组合起来。
HTML 区块元素:
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素:
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

HTML<div>元素：
HTML div 元素是块级元素，它可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

HTML<span> 元素：
HTML span 元素是内联元素，可用作文本的容器
span 元素也没有特定的含义。

HTML表单

input标签

input标签：用户名，密码，选择男女
input标签的type属性值不同，则功能不同

属性值	描述	代码
text	文本框，用于输入单行文本	Username: <input type=“text” name=“user”>
password	密码框	Password: <input type=“password” name=“password”>
radio	单选框, 属性：name：控件名称；控件分组，同组只能选择一个 checked：默认选中；属性名和属性值相同，简写为一个单词	<input type=“radio” name = “gender” checked>男 <input type=“radio” name = “gender”>女
checkbox	多选框, 属性：默认选中：checked	<input type=“checkbox” checked>选项一 <input type=“checkbox”>选项二
file	上传文件, 默认情况下，只能上传一个文件，添加multiple属性可以实现文件多选功能	<input type=“file” multiple>

select标签

<!-- 下拉菜单：select嵌套option ;默认选中：selected-->
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option selected>深圳</option>
</select>

textarea标签

<!-- textarea，右下角有拖拽功能，未来都会禁用掉 -->
<textarea></textarea>

label标签

<!-- label：网页中，某个标签的说明文本；用label标签绑定文字和表单控件的关系，增大表单控件的点击范围 -->
<!-- label绑定有两种写法： -->
<input type="radio" id="man" name="sex"><label for="man">男</label>  //这里的label中的for要和input中的id一致

<label><input type="radio" name="sex">女</label>

button按钮

<!-- button -->
<!-- type属性：
        submit：提交按钮，点击后可以提交数据到后台
        reset：重置按钮，点击后将表单控件恢复默认值，仅能重置在同一个form中的表单控件
        button：普通按钮，默认没有功能，配合JavaScript使用 -->
<button type="button"></button>

script标签

script标签中一般放置JavaScript代码，使 HTML 页面具有更强的动态和交互性。