HTML学习总结

1 HTML

1.1 粗体

<b> 
<strong> 
都可以用来实现粗体的效果

区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong

1.2 斜体

<i>和<em>都可以表示斜体效果

区别：
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。

通过嵌套实现多种效果  嵌套即标签中有标签

<strong><i>同时有粗体和斜体</i></strong>

1.3 预格式(添加代码)

有时候，需要在网页上显示代码，比如java代码  就需要用到pre

<pre>

public class HelloWorld {

    public static void main(String[] args) {

        System.out.println("Hello World");

    }

}

</pre>

1.4 删除

<del>即删除标签 
delete的缩写

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

1.5 下划线

<ins>即下划线标签

<ins>使用ins标签实现的下划线效果</ins>

1.6 图片

如果图片不存在，默认会显示一个缺失图片，这是不友好的 
所以可以加上alt属性。 
当图片存在的时候，alt是不会显示的 
当图片不存在的时候，alt就会出现

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

相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。 2、绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径

1.7 超链接

在新的页面打开超链

<a href="http://www.12306.com" target="_blank">http://www.12306.com</a>

超链上的提示文字

<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

使用图片作为超链

<a href="http://www.12306.com">

<img src="example.gif"/>

</a>

1.8 字体

在html中，颜色通常使用两种方式来表示：
1. 颜色名，比如red, blue
2. 颜色对应的16进制，比如#ff0000 就表示红色

<font color="red" >用red表示红色字体</font>

<br>

<font color="#ff0000" >用#ff0000表示红色字体</font>

1.9 title图标

<title>中原工学院</title>

<link rel="shortcut icon" href="favicon.ico" />

1.10 内联框架

<iframe src="https://www.baidu.com" width="600px" height="400px">

</iframe>

 

1.11 文本框

<input type="text" placeholder="请输入账号....">

1.12 密码框

<input type="password">

1.13 表单

<form method="post" action="">

账号：<input type="text" name="name"> <br/>

密码：<input type="password" name="password" > <br/>

头像<input type="image" src="a.png" />

<input type="submit" value="登陆">

<input type="reset" value="重置" />

</form>

1.14 单选按钮

睡觉<input type="radio" checked="checked"  name="activity" value="睡觉" > <br/>

玩吃鸡<input type="radio" name="activity" value="玩吃鸡" > <br/>

王者荣耀<input type="radio" name="activity"  value="王者荣耀"> <br/>

1.15 下拉列表

设置高度 使用属性size

设置可以多选  使用ctrl或者shift进行多选  multiple="multiple"

默认选中

<select size="3" multiple="multiple">

 <option  >前端</option>

 <option >数据库</option>

 <option selected="selected">后端</option>

 <option >大数据</option>

 <option >人工智能</option>

</select>

1.16 文本域

<textarea cols="70" rows="10"></textarea>

1.17 图片按钮

<button><img src="a.png" width="200px" height="200px"/></button>