HTML学习笔记

最新推荐文章于 2022-08-18 22:33:07 发布

bingongzi

最新推荐文章于 2022-08-18 22:33:07 发布

阅读量4.2k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/bingongzi/article/details/104238052

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 标签

HTML是Hyper Text Markup Language 超文本标记语言的缩写

HTML是由一套标记标签（markup tag）组成，通常就叫标签

标签由开始标签和结束标签组成

<p> 这是一个开始标签

</p> 这是一个结束标签

<p> Hello World </p> 标签之间的文本叫做内容

2. 元素

元素指的是从开始标签到结束标签之间所有的代码

比如

<p>HelloWord</p>

一个完整的HTML文件，应该至少包含html元素，body元素，以及里面的内容，

<html>

<body>

</body>

</html>

有的特殊元素，没有内容，即开始和结束标签直接放在一起比如br,hr

3. 属性

属性用来修饰标签的比如要设置一个标题居中

写在开始标签里的 align="center" 就叫属性

align 是属性名

center 是属性值

属性值应该使用双引号括起来

4. 注释

html使用 进行注释

注释通常用于解释一段代码的意义，注释不会在网页上显示出来

5. 标题

标题会自动粗体，大写其中的内容，并且带有换行效果，一般会使用<h1> 到<h6> 分别表示不同大小的标题，如：

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

6. 段落

<p>标签即表示段落是paragraph的缩写自带换行效果。

代码体现：

<p>段落1 </p>

7. 粗体

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

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

代码体现：

<p>无粗体效果</p>

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

<br/>

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

8. 斜体

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

区别：

（1）i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性。

（2）em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。常常用于引入新的术语的时候使用。

代码体现：

<p>无斜体效果</p>

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

<br/>

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

9. 预格式

有时候，需要在网页上显示代码，比如java代码，就需要用到pre标签。实例代码如下：

<p>这里是没有用预格式的情况：</p>

public class HelloWorld {

    public static void main(String[] args) {

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

    }

}

<br/>

<br/>

<p>使用预格式的情况:</p>



<pre>

public class HelloWorld {

    public static void main(String[] args) {

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

    }

}

</pre>

10. 删除效果

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

代码体现：

<p>无删除效果</p>

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

<br/>

<s>使用s标签实现的删除效果，但是不建议使用，因为很多浏览器不支持s标签</s>

11. 下划线

<ins>即下划线标签。

代码体现：

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

<br/>

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

12. 图像

<img> 即图像标签，需要设置其属性 src指定图像的路径

格式：

<img width=“宽度” height=“高度”src= “图片路径” / alt=”提示语句”>

如果图像是本地文件，只需把图片放在同一个目录下即可 src直接使用文件名，不需要/；

如果图片在上级目录，则在src上加上 ../，即可访问上级目录的图片，如果是在上级目录的上级目录，则使用 ../../；

如果使用图片所在的绝对路径，并在前面加上file://

img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签. 经常采用的手段是放在div中居中。

13. 超链接

<a>标签即用来显示超链完整元素是 :

<a href="跳转到的页面地址">超链显示文本</a>

显示12306链接，并在新的页面中打开代码：

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

14. 表格

<table>标签用于显示一个表格 ,<tr> 表示行，<td> 表示列又叫单元格。

代码体现：

<table border="1" width="200px">

  <tr>

      <td width="50%" align="left">1</td>

      <td>2</td>

  </tr>



  <tr>

      <td align="center">3</td>

      <td>4</td>

  </tr>



  <tr>

      <td align="right">a</td>

      <td>b</td>

  </tr>



</table>

水平合并：用到td属性的colspan

垂直合并：用到td属性的rowspan

15. 列表

列表分简单项目列表、有序列表、定义列表
分别用<ul>标签、<ol>标签、<dl>标签表示

简单项目列表：

<ul>

<li>llllll</li>

<li>hhhhh</li>

</ul>

Ul中type属性值可以为：disc:实心圆心，默认值；square:方形圆心；circle:空心圆。

有序列表:

<ul>

<li>llllll</li>

<li>hhhhhh</li>

</ul>

Ul中type属性值可以为：1:数字，默认值；A/a:大写/小写字母；I/i:大写/小写罗马数字

定义列表：

    <dl>

       <dt>项目1：</dt>

       <dd>内容1</dd>

       <dt>项目2：</dt>

       <dd>内容2</dd>

    </dl>

16. 块div span

<div>、<span> 这两种标签都是布局用的，这种标签本身没有任何显示效果，通常是用来结合css进行页面布局。

17. 字体

使用<font>标签表示字体，font常用的属性有 color和size, 分别表示颜色和大小，在html中，颜色通常使用两种方式来表示：

（1）颜色名，比如red, blue
（2）颜色对应的16进制，比如#ff0000 就表示红色

<font color="green">绿色默认大小字体</font>

<br>

<font color="blue" size="+2">蓝色大2号字体</font>

<br>

<font color="red" size="-2">红色小2号字体</font>

18. 内联框架

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

</iframe>

19. 文本框

<input type="text"> 即表示文本框，并且只能够输入一行。

<!--文本框-->

<input type="text" name="s1" size="15" value="有初始值的文本框">

<br>

<!--有背景文字的文本框-->

<input type="text" name="s2" size="14" placeholder="请输入账号">

<br>

20. 密码框

<input type="password"> 即表示密码框。

<!--密码框-->

<input type="password" name="s3" size="15" placeholder="请输入密码">

21. 表单

<form>用于向服务器提交数据，比如账号密码。

<form action="把数据提交到服务端某个页面里 " method="get">

   

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

    <br>

    密码：<input type="password" name="password" placeholder="请输入密码">

    <br>

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

</form>

22. 单选框

<input type="radio" > 表示单选框。

默认选中，设置属性checked:

单选1<input type="radio" name="h1" checked="checked">

分组：多个单选框，都在一个分组里，同一时间，只能选中一个单选框，设置name属性相同即可：

学习java<input type="radio" name="h1" checked="checked" value="学习java">

学习web<input type="radio" name="h1" value="学习web">

23. 复选框

<input type="checkbox"> 即表示复选框。

<p>今天要做什么呢</p>

学习java<input type="checkbox" value="学习java" checked="checked">

    <br>

学习web<input type="checkbox" value="学习web">

<br>

24. 下拉列表

<select> 即下拉列表，需要配合<option>使用。

    <!--大小为3，可以进行多选，默认选中李四-->

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

       <option>张三</option>

       <option selected="selected">李四</option>

       <option>王五</option>

    </select>

<br>

25. 文本域

<textarea> 即文本域 ,与文本框不同的是，文本域可以有多行，并且可以有滚动条。

<!--5行10列的文本域-->

<textarea cols="10" rows="5">152152168

    12345

    16813

    16131

    16313

</textarea>

26. 普通按钮

<input type="button"> 即普通按钮，不具备提交form的效果

27. 提交按钮

<input type="submit"> 即为提交按钮，用于提交form，把数据提交到服务端

28. 重置按钮

<input type="reset"> 重置按钮可以把输入框的改动复原

29. 图像提交

<input type="image" > 即使用图像作为按钮进行form的提交

30. 按钮

<button></button>即按钮标签，与<input type="button">不同的是，<button>标签功能更为丰富，按钮标签里的内容可以是文字也可以是图像，如果button的type=“submit” ，那么它就具备提交form的功能。

bingongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML学习笔记

1. 标签HTML是Hyper Text Markup Language 超文本标记语言的缩写HTML是由一套标记标签（markup tag）组成，通常就叫标签标签由开始标签和结束标签组成<p> 这是一个开始标签</p> 这是一个结束标签<p>Hello World</p> 标签之间的文本叫做内容2. 元...
复制链接

扫一扫