HTML学习笔记

HTML学习总结

  • 一、什么是HTML?
  • 二、使用环境
  • 三、HTML文档的构成
  • 四、一些学习记录
  • 五、总结

一、什么是HTML?

HTML是超文本标记语言的缩写,被我我们用于构建web页面。超文本的含义在于的将单个网站和或多个网站内的网页链接在一起,实现万物互联。
HTML的最新版本HTML5的doctype的格式变得十分简洁,使用HTML5,任何格式的命令都可以,无论大小写,带不带引号,带不带结束符号。为了照顾浏览器,向后兼容已有内容,HTML5中不含有废弃元素,却含有大量过时元素和属性。HTML5中,可以将多个元素封装在一个元素中,唯一需要注意,不可以将a元素嵌套在另一个a 元素中。

二、使用环境

HTML和CSS语言没有专门的编译器,可以使用Notepad++编辑器,但是更加推荐vscode,插件齐全,使用更加轻便快捷。

三、HTML文档的构成

先来看一个简单的html文档

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>test</title>
</head>
<body>
  <h1>阿布的第一个Web页</h1>
  <p>当前有点丑:!</p>
  <!-- 换行 -->
<p>我可以写的更好看<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
</body>
</html>

web效果图:
HTML学习笔记_第1张图片
html文档的内容基本结构便是如此,后期不断添加元素,以及使用css设置样式就可以得到一个美观的web页面了;
这个简单的html文档的构成如下:

  • 声明文档类型(可有可无)
<!DOCTYPE html>
  • html根元素 包裹了整个完整的页面,也就是说要使用的html要全部放在这个元素里边
<html></html>
  • head容器元素包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容
<head></head>
  • 字符集编码元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字
<meta charset="utf-8">
  • 指定页面图标出现在浏览器标签上
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  • 设置页面标题 包含可以在页面看到的所有内容
<body></body>
  • 注释 在 code 软件中,输入Ctrl + /即可快捷的进行注释!
<!-- <p>注释的内容</p> -->

四、一些学习记录

  • HTML标记语言主要是对其语法、标签(元素)已经元素的学习。HTML的语法其实就是用要求书写格式是Browser 接受和支持的即可,需要注意与HTML、XHTML、HTML5中的书写的细节;
    HTML标签一般分为文档结构标签、文本格式标签、字符格式标签、列表标签、链接标签、表格标签和表单标签8类,掌握了这八类标签,HTML学习就到位了;
    html的属性指的是每一类标签都有什么属性,但是现在除了name、id、class、style这些属性,其他的属性都用css代替了。所以可以说,HTML标记语言的学习其实就是对其的八大类标签属性的学习。

  • 标题: HTML中提供了标题元素提供了六种不同的标题,1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题;CSS可以设置改变的标题的大小,颜色、样式等。

//html
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
  • 文本格式标签
    文本格式标签用于设置文本的格式,如加粗、强调、下划线、删除线、上下标等。
<p>阿布的web页面 <del>好看</del> <ins>丑的</ins>!</p>
<!-- <del><ins> 一起使用,描述文档中的更新和修正。 -->
<p>阿布<mark>highlight</mark> text.</p>
<p><del>删除线</del></p>
<p><s>标记错误的文字</s></p>
<p><u>下划线</u></p>
<p><small>小字体</small></p>
<p><strong>加粗文本</strong></p>
<p><em>突出强调文本</em></p>
<p> <b>加粗文本</b></p>
这是 <sub> 下标</sub><sup> 上标</sup>
<!-- 定义上标下标 -->

HTML学习笔记_第2张图片

注:虽然说在文本格式的标签中,有两个或者两个以上的标签显示的效果是一样,但是它们本质是有所差别的,如b 的效果是加粗,strong(强调)的效果也是加粗,在web中,强调不仅仅是可以用加粗强调,还可以通过下划线、颜色等强大,b不能代替strong,但是strong某个情况的时候是可以替代b标签的使用,就比如本列中的强调就效果是一样,可以交替使用。
还有要注意就是,像strong这种标签还可以通过css设置属性,得出想要的效果。

  • 链接
    链接在整个web中是极为重要的,是实现的万物互联的关键之处,可以通过链接插入图片、文档、网页等内容。
<a href="https://blog.csdn.net/weixin_45970808/article/details/122177628?spm=1001.2014.3001.5502" target="_blank">阿布的博客</a>

注:使用target属性可以定义链接的文档或者是网页在何处显示,如此处的_blank定义新页面在新窗口打开,不添加任何target属性就是在原来页面显示。
在网页中还可以通过超链接去设置一个标签,如从一个网页一个内容跳转到另外一个内容。
css样式表可以用来使用修改链接的文本的颜色、字体背景色、大小、点击时发生的变化等

  • 图像
    插入的图像可以是自己电脑目录下的某个文革,同杨也可以插入来自某个服务器的图像。也可以使用图片创建一个链接。
<p>创建图片链接:
  <a href="https://blog.csdn.net/weixin_45970808/article/details/122177628?spm=1001.2014.3001.5502">
  <img  border="5" src="cat.jpg" alt="阿布的博客" width="32" height="32"></a></p>

在这里插入图片描述

注:src属性为要显示图片文件的位置 URL,即图片文件的路径;alt属性当获取图片出现问题时显示的文字(占位符);height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。
图像如果是要用网页上面的,把url改为网页链接即可
此处的边框使用css的边框样式,可以设定边框的样式大小、位置、形状、颜色等,同样在设置表格或者是文字的边框的也是一样的原理。

  • 表格
    HTML中插入表格一般是用table标签,HTML中可以通过简单的标签设置水平标题或者是垂直标题,设置边框的属性,更加的好看的表格需要使用到css设置。
<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

HTML学习笔记_第3张图片

  • 列表
    列表有有序列表和无序列表,HTML语言可以进行简单的实现,无序列表使用ul标签,默认使用实心圆点作为每项的标志,空心圆为circle,实心方块square;有序列表使用ol标签,可以通过设置type类型设置每项的标志如"type=A"表示使用大写字母显示。
<h4>小写字母列表:</h4>
<ol type="a">
 <li>啊啊啊</li>
 <li>嗷嗷嗷</li>
 <li>哎哎哎</li>
 <li>唉唉唉</li>
</ol>  

HTML学习笔记_第4张图片

注:列表还可以设置嵌套列表,自己定义新的列表,自定义列表以 dl标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以dd开始,列表项内部可以使用段落、换行符、图片、链接以及其他列表。

  • 表单
    HTML 表单用于收集用户的输入信息,表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。
    表单一般涉及制作按钮、复选框、单选框、文本域、下拉列表等内容;
<form>
  <!-- 文本框,注意有 placeholder 提示符 -->
  用户名:<br>
  <input type="text" name="name" placeholder="user">
</label>
<button>Save</button><br>
  密码:<br>
  <input type="password" name="ps" placeholder="password">
</label>
<button>Save</button>
  <br>
  年龄:<br>
  <!-- 数字输入框,注意 min 和 value 属性-->
  <input type="number" name="age" min="18" max="40" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别:<br>
  <input type="radio" name="gender" value="male" checked><br>
  <input type="radio" name="gender" value="female"><br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表,注意 selected 属性 -->
  党派:<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具:<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期:<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域,注意 rows 和 cols 属性 -->
  您的建议:<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

注:表单本身是不可见的,一个文本字段的默认宽度是20个字符;
txet类型是输入普通的文本,可见的;password中的字符是隐藏的,不可见的;input控件输出一个文本框;placeholder值设置初始在文本框显示的内容;button定义一个点击按钮;option定义下拉列表中的选项;select定义了下拉选项列表;label定义 input 元素的标签,一般为输入标题;
表单中的单选按钮可以设置value、name、checked这三种属性,value提交数据到服务器的值; name为控件命名; checked当设置 checked=“checked” 时,该选项被默认选中。如果需要禁用某选项,设置为disabled即可,hidden可设置该选项不显示在下拉列表里面,

五、总结

目前来说,我已经是学习完了HTML的一些基本元素的内容,写个简单网页啥完全没有问题,就是还比较丑陋啊!
HTML它定义了网页内容的含义和结构,建立起来了一个网页基本框架,是制作网页的基础,有了基础才可以往上添加新东西,做出更加美观新颖的网页。
html我其实学的时候就觉得挺简单的,简单让我有点无聊了,就是要记的元素挺多的,修改属性起来也比较麻烦,还不能把页面做的很好看,希望在后面css的学习甚至是更为深入的学习中我可以把页面做的好看,努力做到平时看到那种网站的水平!

你可能感兴趣的:(html,学习,前端)