Posted on 

HTML-基础

关于前端web开发的正经笔记，这篇是不含css的HTML基础

一、网页基础知识

1.1 HTML模板

新建或者打开一个.html文件，输入!后按空格会出现一个模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html> 
<!--规定了浏览器文档使用哪种规范，以前需要在后面写上很长一串规范地址，现今HTML5规范无须额外指定-->
<html lang="zh-cn"> <!--所有网页最大的结构  网页中所有的标签存放在html标签中-->
    <head> <!--网页头部 网页设置 告诉浏览器一些相关信息-->
        <!--meta 具体设置网页设置的标签 -->
        <meta charset="UTF-8"> <!--网页编码格式 推荐UTF-8国际编码,常用的还有gbk国标-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--视口 -→ 移动端-->
        <title>我是网页标题</title>
    </head>
    <body> 
    	网页主体 网页结构
    </body>
</html>

1.2 HTML的lang属性

  • 决定浏览器是否自动弹出翻译框
  • 弹出: en，代表是英文网页(不管后续写的内容是不是英文)
  • 不弹出: zh-cn，代表网页是一个中文网页

1.3 注意一些书写规范

  • 标签、属性名以及相关符号书写均在英文半角状态下的小写
  • id、class必须以字母开头
  • 所有双标签必须闭合
  • 属性值必须带引号，单双引号都可以

二、标签

2.1 meta (辅助标签)

meta标签写在head标签中，具体设置网页设置的标签

2.2 div (块标签) (division分开分隔)

  • 独占一行（上下分割）

2.3 H系列标题标签(heading)

  • h1~h6标签用于表示网页内容的标题，不同程度的加粗与增大。
  • 在一个网页中**h1标签最好是有且仅有一个**（有利于SEO优化）

2.4 排序标签

  • 2.4.1 ul无序列表标签 (unordered list不排序的列表)

    • 其子标签必须是<li>。
    • 默认实心圆点符号，修改type属性可改变符号
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--
    type="disc" 实心圆点
    type="circle" 空心圆点
    type="square" 实心方块
    type="none" 不显示符号
    -->
    <ul type="circle">
      <li>第一行</li>
      <li>第二行</li>
      <li>第三行</li>
    </ul>

  • 2.4.2 ol有序列表标签 (ordered list有序表)

    • 其子标签必须是<li>。
    • 默认有数字符号，修改type属性可改变符号
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!--
    type="1" 数字顺序
    type="A" 或者 type="a" 字母顺序
    type="I" 或者 type="i" 罗马数字顺序
    -->
    <ol type="A">
      <li>第一点</li>
      <li>第二点</li>
      <li>第三点</li>
    </ol>

2.5 p段落标签 (paragraph)

1
2
<p> p标签中通常用来放置一段文字。
    注意：p标签里不可以放div标签(任意块标签)，这会导致在浏览器中p标签会被分隔成两个。</p>

2.6 a标签 (超链接 / 锚点)

  • 2.6.1 超链接

    通过添加target属性可以指定打开链接的位置

    • target=”_blank” 新标签页打开

    • target=”_new” 新标签页打开，但所有的new只会打开一个新标签页

    • target=”_self” 默认，在当前标签页打开

      1
      <a href="https://blindarbiter.github.io" target="_blank">点我跳转到BlindArbiter的博客</a>

  • 2.6.2 锚点 (anchor锚)

    跳到页面中的对应位置，锚点还可配合name属性使用

    1
    2
    <a href="#abc">点我页面滚动到name为abc的标签位置></a>
    <a name="abc">滚到这里</a>

2.7 img标签 (image图像)

单标签，可用 / 作为结尾

1
2
<img src="xxx">
<img src="xxx" />

两种写法都可以
在HTML5的新标准中，明确的指出了不需要/来结束单标签，所以，更推荐大家不写/

一些常用属性：

  • src：指定图片资源路径

    • 相对路径：或者直接以文件名或目录名开头。
      • ./ 相当于当前路径
      • ../ 返回到该文件的上一级路径
    • 绝对路径：一个从根目录出发的路径或者一个完整的网络地址。
      • / 项目根目录

    所有写路径的地方都适用相对路径和绝对路径的写法，比如上面讲过的a标签herf属性。

  • width height：指定img显示大小

    能为img图片预留对应的空间从而不影响其他布局

    1
    2
    3
    4
    <img src="xxx" width="200px" height="100px"> 
    像素单位px
    <img src="xxx" width="50vw" height="50vh"> 
    可视区域的单位view width/height：1vh=1%屏幕占比

    tip：width与height一般情况下和图片原始尺寸保持一致，不过不一致也是允许的，但即使使用width和height缩小图片，仅仅是视觉上的缩小，浏览器还是需要加载原始的图片资源（并不能减轻请求压力）,所以有图片缩放的需求时，应当提前用图片处理软件处理好了之后，再引入图片。

  • alt属性：告知搜索引擎当前图片表示

    当img的src地址出错时，alt属性的值能显示出来（或许能让用户/浏览者得到不那么糟糕的体验(?)）

    1
    2
    3
    <img
    href="https://github.com/BlindArbiter/BlindArbiter.github.io/blob/master/img/hexo_blog/cover1.jpg"
        alt="烟花"

  • title ：在img标签里，当鼠标指针移动到图片上时，title能够显示出提示文字（增强用户/浏览者体验）

tip：仅限于网络图片打不开，当别人做了安全验证时
way：在我们要用图片的html页面的head中，加入以下代码（解除限制）

1
<meta name="referrer" content="no-referrer">

2.8 其他标签

一些与内容同化的标签

标签名称 写法
b标签 <b></b> 文字加粗，strong还能够被搜索引擎检索
i标签
em标签		 <i></i>
<em></em>		 文字斜体，i标签仅为视觉上斜体
em还能被搜索引擎检索
br标签 <br/> 文本换行
hr标签 <hr> 横线分隔
sup标签
sub标签		 <sub></sub>
<sup></sup>		 上角标
下角标。
del标签 <del></del> 删除线
span标签 <span></span> 本身没有特殊效果，可配合css添加样式 
1
<span style='color:red'>红色</span>

三、表格

table双标签 <table></table>

  • tr 定义表格的行，内容都写在行里面

  • th (thead) 行里面，字体加粗，表示头部标题

  • td (tbody) 行里面，表示表格具体每一项

    1
    2
    3
    4
    5
    6
    7
    8
    <table>
        <tr>
            <th>表格标题</th>
            <td>表格内容</td>
            ...
        </tr>
        ...
    </table>

3.1 边框和边距属性

属性 / 样式 作用
border 每个单元格都加上边框（但该数值大小只影响外围边框粗细）
cellpadding 单元格内容与边框的距离
cellspacing 单元格之间间隙大小
align 设置文字对齐方式（类似于text-align）
border-collapse:collapse(css样式) 相邻单元格的边框合并（style=’ ‘/用选择器） 
1
2
3
4
5
<style>
table{
	border-collapse:collapse;
	}
</style>
1
2
3
4
5
6
<table style="border-collapse:collapse">
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

3.2 单元格合并

纵向合并：rowspan 规定单元格纵跨的行数

1
<td rowspan="2"></td>

横向合并：colspan 规定单元格横跨的列数

1
<td colspan="2"></td>

tip：合并后记得删除多余单元格

其它补充：

  • tbody 即使不写，默认也会添加这个标签去包裹所有内容；
  • caption 表格标题

四、表单

由表单域、表单控件和提示信息组成
作用：收集客户端信息

4.1 form标签

form标签是一个存储表单元素的区域，里面提供数据输入和采集的是很多表单控件元素完成的。

  • 写法

    1
    2
    3
    <form action="url地址" method="提交方式" target="打开方式" name="表单名">
      <!--各种表单控件元素-->
    </form>

  • action — 表单提交地址

  • method — 表单提交数据的方式（get 和 post）

  • target — 打开方式 即后端返回的新页面 (同上述a标签的target)

  • name — 表单名

4.2 表单控件

属性
type 表单类型
name 赋值属性
value 设置表单控件的值
placeholder 提示文本
checked 默认选择，单选或多选时，可以指定初始默认的已被选中的项
disabled 禁止使用，规定input禁止使用
hidden 隐藏视图

表单控件的作用是采集用户的数据然后提交到后端，所有的控件都必须有name及value属性，并且除了单选多选外，所有的控件name都不能相同。

  • input

    单标签，标签属性type不同，意义不同：

    • value的值随便定义，后面添加文字补充说明
    • 空按钮一般用js添加功能事件
    属性 示例
    text 单行文本框 <input type="text" name="名字" placeholder="提示文字" />
    password 密码输入框 <input type="password" name="名字" />
    radio 单选按钮 <input type="radio" name="sex" value="男" />男
    <input type="radio" name="sex" value="女" />女
    checkbox 多项选择 <input type="checkbox" name="hobby" value="1" />羽毛球
    <input type="checkbox" name="hobby" value="2" />乒乓球
    <input type="checkbox" name="hobby" value="3" />网球
    button 空按钮 <input type="button" value="按钮" />
    <button type="button">按钮</button>
    reset 重置按钮 <input type="reset" />
    file 上传文件 <input type="file" name="f" />
    hidden 隐藏 <input type="hidden" name="hide" value="1" />
    submit 提交 <input type="submit" />
    <button>提交按钮</button>
    number 数字输入框 <input type="number" /> (min最小 max最大 step倍数)
    range 数字滑块 <input type="range" /> (min最小 max最大 step倍数)
    time
    date
    month
    week    		 时间
    年月日
    年月
    年周    		 <input type="time" />
    <input type="date" />
    <input type="month" />
    <input type="week" />
    color 颜色 <input type="color" />

  • label

    辅助input进行选择。

    我们可以通过给文字加上label标签然后将文字和input关联起来。

    一个label只服务一个表单控件

    1
    2
    3
    4
    5
    6
    label的for属性与input的id属性对应：
    <input type="radio" name="sex" value="1" id="sex1" /><label for="sex1">男</label>
    <input type="radio" name="sex" value="2" id="sex2" /><label for="sex2">女</label>
    或者：
    <label> <input type="radio",name="sex"，value="男">男 </label>
    <label> <input type="radio",name="sex"，value="女">女 </label>

  • 下拉选框

    select 和 option配合实现下拉选框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- name规定给select  value规定给option并且不能相同 -->
    <select name="days">
      <option value="none">---请选择星期---</option> <!--或 value="" -->
      <option value="1">星期一</option>
      <option value="2">星期二</option>
      <option value="3">星期三</option>
      <option value="4">星期四</option>
      <option value="5">星期五</option>
      <option value="6">星期六</option>
      <option value="0">星期日</option>
    </select>

    • select标签的size属性：规定下拉时最多显示几个

    • option标签的selected属性：规定默认显示哪个option

  • 文本域textarea

    多行文本输入框，rows标签属性定义高度，cols标签属性定义宽度；

    如果需要用来传值，同样的需要制定name属性。

  • 表单控件分组

    fieldset 和 legend配合将多个表单控件根据需要分组；

    fieldset分组，legend定义组标题。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <form action="" medthod="" name="">
      <fieldset>
        <legend>注册信息</legend>
        用户名：<input type="text" name="user" />
        密  码：<input type="text" name="pwd" />
      </fieldset>
      <fieldset>
        <legend>个人信息</legend>
        姓名：<input type="text" name="name" />
        年龄：<input type="text" name="age" />
        性别：<input type="radio" name="sex" value="0" />男<input type="radio" name="sex" value="1" />女
      </fieldset>
    </form>

4.3 一些补充

表单相关选择器

:focus 表单获得焦点时被选中。

:focus-within 表单自身或者表单后代元素焦点时被选中触发

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明作者BlindArbiter。

博客近期分类标签归档
友链ModifierDrunkbabyGhDemi其他友链
更多GitHub

Copyright © 2022 - 2023 BlindArbiter

Powered by Hexo | Theme - Stellar