zbwer's Blog

Appearance

HTML学习笔记 ​

基础设置 ​

html
<!DOCTYPE html> 表明文档类型为html5
<html lang="en"> 所用语言为English
<meta charset="UTF-8"> 设置字符集UTF-8

标签 ​

标题标签

html
<h1> </h1> ~ <h6> </h6> 从大到小

段落标签

html
<p> </p> 放在段落开头和结尾，用于分割段落

换行标签(单标签)

html
<br/> 即break 强制换行
<br/>行间距比<p></p>段间距小

练习

html
水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0
数据统计：水花兄弟合砍61分
库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。

汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。

兄弟对决升级：小库里给哥哥造成压力
库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。

但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。

作者: pink老师
2019-8-8
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h3>数据统计：水花兄弟合砍61分</h3>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。</p>
        
    <p>汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
        
    <h3>兄弟对决升级：小库里给哥哥造成压力</h3>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。</p>
        
    <p>但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。</p>
        
    <p>作者: pink老师
        <br/>2019-8-8</p>
</body>
</html>

文本格式化标签

html
加粗：<strong> </strong> 或 <b></b>
倾斜：<em> </em> 或 <i></i>
删除线:<del> </del>或 <s></s>
下划线:<ins> </ins>或 <u></u>

盒子标签(用于布局)

html
<div> </div> 大盒子，一行只能用一个
<span> </span> 小盒子，一行可以用多个

图像标签

html
<img src="图像URL" />
src是必须属性，指定路径与文件名
其他属性
<img src="图像URL" alt=""/> 替换文本，图片显示不出来
<img src="图像URL" title=""/>  提示文本，鼠标悬浮显示文案
width height 一般只修改一个，另一个会等比例随之更改
<imt src="" border=""/> 设置图像边框

相对路径的分类(文件相对于HTML文件的位置)

分类写法
同一级路径src="img.jpg"
下一级路径src="images/img.jpg"
上一级路径src="../img.jpg"

绝对路径(实际开发较少使用，切换环境后可能打不开)

src="C:\Users\zbwer\Desktop\课表.png" 或者 src="图片的网页链接"

超链接标签

html
<a href = "url" target = "目标窗口弹出的方式"> 提示文字 </a>

href 即 要跳转的链接：外部网页链接要以 http 开头
target 默认值是 _self 当前窗口打开页面 _blank新窗口打开页面

链接分类:
1. 外部链接 "https://www.baidu.com/"
2. 内部链接 "img.png"
3. 空链接   "#"
4. 下载链接：href中的地址是一个exe或者压缩包格式的文件
5. 锚点链接：快速定位页面中的某个位置

锚点案例：
<h1 id="one">标题</h1>
<a href= "#one">跳转到标题</a>

嵌套案例：
<a href="https://www.baidu.com/"> <img src="课表.png"> </a>

注释标签

html
<!--注释内容--> 快捷键 CTRL + /
常见约定：注释 位于 要注释代码的上面，单独占一行

特殊字符

html
常见特殊字符：
空格： &nbsp;		大于： &gt;		小于: &lt;

第一节综合练习

表格标签 ​

基本语法：

html
<table>定义表格的标签
    <caption>表格标题</caption>可有可无，居中显示在表格上方
    <tr>定义表格中的行
        <!-- 表头标签 th居中加粗 -->
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
    	<td>数据内容1</td>tabledata 数据单元格的内容
        <td>数据内容2</td>tabledata 数据单元格的内容
    </tr>
</table>

表格属性：（写在table的箭头内）实际开发使用较少，后期用CSS实现

属性名属性值描述
alignleft,center,right规定表格相对周围元素的对齐方式
border像素值 或者 ""（默认无边框）规定单元格的边框
cellspacing像素值规定单元格之间的空白，默认2像素
cellpading像素值规定单元内容与边框之间的空白，默认1像素

表格结构标签：表格过长时，用来划分区域，区分表头与主体.

  • <thead>标签：表格的头部区域（要包含<tr>）
  • <tbody>标签：表格的主体区域

合并单元格

1.先确定是跨行(rowspan)还是跨列(colspan)

2,找到目标单元格，增加合并代码:<td colspan="合并个数"> </td>

3.删除多余单元格

列表标签 ​

分类： 无序列表，有序列表，自定义列表

基本语法：

html
无序列表：
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
有序列表关键字为<ol></ol>
自定义列表：
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

注意的点：

1.<ul>,<ol>(有序、自定义也一样)中只能嵌套<li></li>，不能加入其他标签。

2.<li>相当于一个容器，类似<div>,可以容纳所有元素

3.小标题与解释说明：使用自定义列表

表单标签 ​

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

**表单控件：**包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

**提示信息：**一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域： 它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1.表单域 ​

基本语法：

html
<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
写表单控件之前必须有表单域

常用属性：

属性属性值作用
actionurl地址指定接受并处理标单数据的服务器程序的url地址
methodget/post设置表单数据的提交方式
name名称指定表单数据的名称，以区分同一页面不同表单

2.[input]控件 ​

基本语法：<input type="属性值" value="默认值">

常用属性：

  • value:文本类的控件显示为默认文本，其他控件的value值主要给后台人员使用
  • maxlength:属性值为一个正整数，表示允许输入的最多字符数
  • type:text单行文本输入框;password密码输入框；radio单选按钮；checkbox复选框；button普通按钮，用于启动JS脚本；submit提交按钮；reset重置按钮清除所有数据；image图像形式的提交按钮；file提交文件按钮
  • name:表单的名字；如果是单选和复选按钮，必须给同一组按钮命名相同的名字，才能实现单选的效果；在学ajax和后台时，是常用的属性
  • check:表示默认选中的状态，常用于单选和复选按钮

3.[label]标签 ​

用于绑定一个表单元素，当点击<label>内的文本时，浏览器会自动将光标转到对应的表单元素上，增加用户体验

基本语法：

html
<label for="idname">男</label>
<input type="radio" name="sex" id="idname"/>
或者
<input type="radio" id="sex" name="sex"/><label for="sex">男</label>
注意：label标签的for属性必须与表单元素的id属性相同

4.[select]下拉列表 ​

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。

html
<select>
    <option>选项1</option>
    <!-- 默认选择设置 -->
    <option selected="slected">选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

5.[textarea]元素 ​

显示多行文本，用于留言板，评论等场景。

html
<textarea >
    文本内容
</textarea>