HTML知识点整理

1.基础

1.中文问题
    在html的部分加上编码设置

<meta http-equiv="Content-Type" content="text/html; charset=GB2312">

2.html元素
    一个完整html应该包括html元素，body元素，以及里面的内容元素。

2.基本元素

标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题5</h6>

段落标签
    自带换行效果

<p>段落1</p> 
<p>段落2</p> 
<p>段落3</p> 

加粗标签
    ‘b’,'strong’标签都是加粗，‘strong’在语义上有重要的意思

<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>

斜体标签
    ‘i’，‘em’都是斜体标签，‘em’在语义上有重要的意思

<i>使用 i 标签带来的斜体效果</i>
<em>使用 em 标签带来的斜体效果</em>

预格式
    网页上贴代码时使用可以保持原来的格式不变

<pre>
public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
} 
</pre>

删除标签
    ‘del’，‘s’多数浏览器不支持s标签，建议使用del标签

<del>使用del标签实现的删除效果</del>
<s>使用s标签实现的删除效果</s>

下划线标签
    ‘u’，‘ins’均为下划线标签,推荐使用ins，但是最好不要用下划线，用户会以为是超链接

<ins>使用ins标签实现的下划线效果</ins>
<u>使用u标签实现的下划线效果，但是不建议使用</u>

图像标签
  ①显示图像
  Ⅰ.链接

<img src="http://pic.ruiwen.com/allimg/1708/598c8d3752d8939511.jpg?x-oss-process=style/qr.ruiwen"/>

  Ⅱ.同级目录

<img src="example.png"/>

  Ⅲ.上级目录

<img src="../xample.png"/>

  Ⅳ.绝对路径

<img src="file://c:/example.png">

  ②调整图片大小

<img width="200" height="200" src="example.png"/>

  ③调整图片位置
    居中

<div align="center">
  <img src="https://how2j.cn/example.gif"/>
</div>

  ④替换图片上的文字
    可以设置alt，若图片存在alt中的文字不会显示，若图片不存在alt中的文字就会显示。

<img src="example.png" alt="这个是一个图片" />
<img src="null.png" alt="这个是一个图片" />

链接
    a标签

<a href="http://www.csdn.net">csdn 在当前页跳转</a>
<a href="http://www.csdn.net" traget="_blank">csdn 打开新的窗口浏览</a>
<a href="http://www.csdn.net" title="提示文字">csdn 鼠标放在上面时会弹出提示</a>
<a href="http://www.csdn.net"><img src="example.png"/></a>
<a href="tel:10086">移动热线 可以拨号</a>
<a href="mailto:doubleRighttt@163.com">发邮件</a>
 <a href="#C4">查看章节 4</a> <!--描点定位到id为c4的标签-->

表格
    tr表示行（table row）
    td表示列（table data）
    tr和td都可以设置背景颜色bgcolor
    td可以设置属性 宽度px像素大小或者百分比
    水平位置align，分别为center，right，left
    垂直位置valign，分别为top，middle，buttom
    合并行colspan，合并列rowsspan

<table border="1" width="200px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr> 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr> 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr> 
</table>

列表
    ①无序列表

<ul>
<li>OW</li>
<li>LOL</li>
</ul>

    ②有序列表

<ol>
<li>闪光</li>
<li>大锤</li>
</ol>

块div和span
    他们本身没有效果，主要配合css布局
div布局

<img style="margin-left:50px" src="ex.gif"/>
<img style="margin-left:50px" src="ex.gif"/>
 
<div style="margin-left:100px" >
 <img src="ex.gif"/>
 <img src="ex.gif"/>
</div>

div和span的区别
    div是块元素，即自动换行（h，table，p）
    span是内联元素，即不会换行（img，a，b，strong）

字体

<font color="red" size="-2">红色小2号字体</font>
<font color="red" size="+2">红色大2号字体</font>
<font color="#ff0000" >用#ff0000表示红色字体</font>

颜色速查表

内联框架
    iframe标签，可以实现在网页中插入网页，相当于在浏览器中打开另一个浏览器然后浏览网页

<iframe src="https://csdn.net/" width="600px" height="400px"></iframe>

3.表单元素

  文本框
    只可以输入单行，若要多行使用textarea。

<input type="text" size="10" placeholder="背景文字，输入后消失">  
<input type="text" value="初始值">

  密码框
    输入的文字会自动变成星号

<input type="password">

  表单
    type为按钮的分别为reset、submit，image（设置src，可以提交）

<form action="https://how2j.cn/study/login.jsp" method="get/post">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

  get和post的区别
    get
    是form默认的提交方式
    如果通过一个超链访问某个地址，是get方式
    如果在地址栏直接输入某个地址，是get方式
    提交数据会在浏览器显示出来
    不可以用于提交二进制数据，比如上传文件
    post
    必须在form上通过 method=“post” 显示指定
    提交数据不会在浏览器显示出来
    可以用于提交二进制数据，比如上传文件

  单选框
     默认选择设置checked；分组设置name属性相同，这样同一时间只可以选择单个选项。

java<input type="radio" name="activity" value="学习java" > <br/>
oracle<input type="radio" name="activity" value="tokyohot"  checked="checked"> <br/>
OW<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

  复选框

java<input type="checkbox" name="activity" value="学习java" > <br/>
oracle<input type="checkbox" name="activity" value="tokyohot"  checked="checked"> <br/>
OW<input type="checkbox" name="activity" value="dota" > <br/>
LOL<input type="checkbox" name="activity"  value="lol"> <br/>

  下拉列表
    size设置显示个数，multiple设置下拉多选

<select size="3" multiple="multiple">
 <option >OW</option>
 <option selected="selected">WOW</option>
 <option selected="selected">LOL</option>
</select>

  文本域

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>

  按钮

<button type="submit">登陆</button><!--放在form中可以作为提交按钮-->

参考文章