HTML基础

1.11

标题对齐方式

<h1 align="center">
    hh
</h1>

文字斜体

<em>斜体内容</em>
<u>下划线</u>
<strike>删除线</strike>

上标和下标

<sup>上标</sup>
<sub>下标</sub>

特殊符号

引号              "        "
大于号            <           >
小于号            &gt;           <
乘号              &times;       × 
小结符号           &sect;        § 
版权符号           &copy;        ©
空格              &nbsp;

原始排版标签

<pre></pre>
<!-- 保留空格，制表符 -->

水平线标签

<hr>

图像

<img alt="图像不能显示时替换的文字" src="图像文件地址" width="" height="" vspace=“” hspace="" border="">
width和height单位是像素
vspace和hspace分别是控制图像与(上下/左右)的文字或图像的间距，单位是像素
border是图像边框，单位是像素

文本链接

<a href="链接地址" target="打开新窗口的方式"></a>
target的主要属性值：
  _blank:新建一个窗口打开
  _parent:在上一级窗口打开
  _self:在同一窗口打开
  _top:在浏览器整个窗口打开，忽略所有的框架结构

书签链接

• 将a标签中的href换成定位符号

1.12

图像热区链接

这样一张图片，给每个位置写上热区链接，一张图就有了四个链接

百度	PTA
必应	CSDN

<img src="热区链接.png" usemap="#fishing">
<map name="fishing">
    <area shape="rect" coords="0,0,120,55" href="https://www.baidu.com"/>
    <area shape="rect" coords="0,55,120,110" href="https://www.pintia.cn"/>
    <area shape="rect" coords="120,0,240,55" href="https://cn.bing.com"/>
    <area shape="rect" coords="120,55,240,110" href="https://blog.csdn.net/"/>
</map>

表格

表格基础

• table:表格标签(border为边框的像素，cellpadding是单元格内容与单元格边框的距离)
• caption:表格标题
• tr:行标签
• th:表头标签
• td:单元格标签

<table border="1px" cellpadding="10">
    <caption>成绩</caption>
    <tr>
    	<th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
    	<td>cgy</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

表格的合并

<td colspan="跨的列数"></td>
<td rowspan="跨的行数"></td>

表格分组

• 使用标签对列进行样式控制
• 在内部用标签对具体的列进行控制

<colgroup>
    <col style="background-color: antiquewhite">
    <col style="background-color:#f0f8ff">
</colgroup>

1.13

列表

无序列表

• ul或者li中的type属性控制项目符号
  1. disc是黑圆
  2. circle是白圆
  3. square是黑方

<ul>
    <li>...</li>
</ul>

无序列表

• 两个属性：type，start
• type：1，a，A，i，I 控制序号类型
• start：序号从第几开始

<ol>
    <li>...</li>
</ol>

定义列表

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

1.14

表单

<form action="" name="" method="" enctype="" target="">
    ...
</form>

• action:表单处理程序，也就是表单收集到的资料将要提交的地址
• name:表单名称，为防止表单信息在提交到后台处理程序时出现混乱而设置的名称
• method:定义从表单获取信息的方式，只有两个值（get）（post）
• enctype:表单提交方式，属性值有：（text/plain）（application/x-www-form-urlencoded）（multipart/form-data）
• target:窗口打开方式

1.15

输入标签

文本框：

单行文本框

<input type="text" name="" size="" maxlength="" value="">

• name:名称
• size:文本框在页面中显示的长度，单位：字符
• maxlength:用于定义文本框中最多可以输入的文字书
• value:用于定义文本框中的默认值

密码输入框

<input type="password" name="" size="" maxlength="" value="">

单选按钮

<input type="radio" value="" name="" checked>

• value:传送到处理程序的值
• checked:有这个的话，即为默认选中

复选框

<input type="checkbox" value="" name="" checked> 

按钮

• 普通按钮

  <input type="button" value="按钮上的文字" name="" onclick="处理的程序">
  

• 提交按钮

  <input type="submit" name="" value="">
  

• 重置按钮

  <input type="reset" name="" value="">
  

图像域

• 图像域是指提交按钮上的图片，图片有提交功能

  <input type="image" src="图片路径" name="设置代表按键（如submit、button等）">
  

文件域

• 用于查找硬盘中的文件路径

  <input type="file" accept="" name="">
  

  • accept:所接受的文件类型
  • name:文件传输的名称

文本域

<textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数"></textarea>

菜单/列表

<select >
    <option>...</option>
</select>

• name:名称
• size:在页面显示的长度
• multiple:表示可以多选
• value:定义选项值
• selected:默认被选中