前端学习 HTML

标题

<h1>一级标题</h1>
<h6>六级标题</h6>

段落和换行标签

<p>段落</p>
</br>   在一段中插入，强制换行

创建多个段落快捷键：p*数量+Tab

文本格式化

<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>

盒子标签

<div></div>
<span></span>
没有语义，用来装内容的
div独占一行，span不独占

图像标签

<img src="URL"/>
图像标签为单标签
src 路径
alt 图片显示不出来时用来替换的文字
title 鼠标悬停时显示的文字
width 像素 宽度
height 像素 高度
border 像素 边框粗细

超链接标签

Ctrl+D可快速复制粘贴当前内容至下一行

<a href="">文本或图像</a>
target 打开方式 _self默认 _blank在新的窗口打开

1.外部链接

<a href="https://www.baidu.com"></a>

2.内部链接

<a href="想去的界面.html"></a>

3.空链接

<a href="#"></a>

4.下载链接

href里面的地址是一个文件

5.锚点链接

第一步：在目标标签添加id 
<h3 id="one"><h3/>
第二步：在链接标签添加属性值 
<a href="#one"><a/>

特殊字符

空格符 &nbsp
< 小于号 &lt
> 大于号 &gt
& 和号 &amp

表格标签

基础

<table>
  <tr>
    <td>表格的内容</td>
  </tr>
</table>
 
tr 行
td 一行里的单元格
 
  <tr>
    <th></th>
    <th></th>
  </tr>
th 表头 单元格内加粗居中

结构划分

<table>
  <thead>头部
    <tr>
    <td>表格的内容</td>
    </tr>
  </thead>
</table>
 
<table>
  <tbody>主体
    <tr>
    <td>表格的内容</td>
    </tr>
  </tbody>
</table>

合并单元格

rowspan = "合并的行数"
colspan = "合并的列数"

列表标签

无序列表

<ul>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
  ……
</ul>
 
ul里只能嵌套li，li里面可以嵌套所有元素

有序列表

<ol>
  <li>列表项1</li>
  <li>列表项1</li>
  <li>列表项1</li>
  ……
</ol>
 
列表项有顺序

自定义列表

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ……
</dl>

表单标签

表单域

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>
 
action url地址 接受表单数据的服务器的url地址
method get/post 表单的提交方式
name 名称 表单的名称，用以区分同一页面的多个表单域

表单元素

<input type="属性值" />

text 文本
password 密码
radio 单选按钮
checkbox 多选按钮
submit 提交
reset 重置
button 按钮，配合JS搭配使用
file 上传文件
select 下拉菜单
  <select>
    <option>上海</option>
    <option>北京</option>
  </select>
  option里属性selected即默认值
textarea
  <textarea>
  文本内容
  </textarea>

name 表单的名字，只有当名字相同才能多选一
value 表单的默认值
name和value都是给后台人员看的
 
checked 表单的默认选项（针对单多选）
maxlength 表单的最长值

label标签

<label>标签为input元素定义标注
绑定一个表单元素，当点击<label>内的文本时，会选择对应元素

<label for="sex">男</label>
<input type="radio" id="sex">

标签查找

W3C

MDN