网络编程（一）之HTML

作者: blackmanba_084b | 来源:发表于2021-05-17 14:47 被阅读0次

这段时间学习了网页的基础知识，考虑到知识点内容比较多，为了方便记忆，我还是记下来，方便日后总结。
这里我学习的方式通过黑马pink老师的教学视频学习。

一、网页

什么是网页
通常我们看到的网页，常见以.htm或.html后缀结尾的文件，俗称为HTML文件。
什么是HTML
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。

超文本是指加入图片、声音、动画、多媒体等（超越文本限制）
它可以从一个文件跳到另一文件，与世界各地主机的文件连接（超链接文本）。

二、常用浏览器及内核

浏览器及其内核

三、 Web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

Web标准的构成
主要包括 结构(Structure), 表现(Presentation)，行为(Behavior) 三个方面。

结构：结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现：表现用于设置网页元素的版式，颜色、大小等外观样式，主要指的CSS
行为：行为是指网页模式的定义及交互的编写，现阶段主要学的是JavaScript

四、 HTML语法规范

1. 基本HTML语法概述

HTML分为双标签(<html>和</html>)，以及单标签(<br/>), 这种情况出现的概率不大。

2. 第一个HTML

3. 文本类型声明标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网页</title>
</head>
<body>
    body_content
</body>
</html>

这里主要分三个部分：

<!DOCTYPE> 标签, 表示当前页面采取的HTML5版本来显示页面，它就是类型声明标签。
lang语言，en定义语言为英语， zh-CN定义语言为中文。
charset 字符集，在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。<meta charset="UTF-8" />。

4. HTML 常用标签

1. 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> - <h6>, 数字越小字体越粗越大。

<h1> 我是一级标题 </h1>

2. 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

<p> 我是一个段落标签 </p>

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。

3.换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。

 <br />

特点：

<br /> 是个单标签。
<br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4. 格式化标签

加粗 <strong></strong>或<b></b>
倾斜 <em></em>或<i></i>
删除线 <del></del>或<s></s>
下划线 <ins></ins>或<u></u>

5. div和span标签

<div>标签用来布局，一行只能放一个<div>，大盒子
<span>标签用来布局，一行可以放多个<span>，小盒子

6. 图像标签及路径

<img src="图像URL">

src 用来表示图片路径
alt 替换文本，当涂县不能显示的时候，会显示的文字
title 鼠标放在图片上显示的文字
width 图像的宽度
height 图像的高度
border 设置图像的边框粗细

7. 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

href 用于制定链接目标的url地址，当没有确定链接目标可以设置为#。这里可以下载图片，图片，表格，音频或压缩包。
target 用于制定链接页面的打开方式，其中_self为默认值， __blank为在新窗口中打开方式。

8. 锚点连接

当我们点击某个连接可以快速定位页面中的某个位置

在链接文本的href属性中，设置属性为#名字，如

<a href="#two">第二集</a>

找到标签目标位置标签，里面添加一个id属性为上面所述的名字, 如：

<h3 id = 'two'>第二集介绍</h3>

8. HTML 注释及特殊字符

注释

<!-- 注释语句 -->

特殊字符

9. 表格标签

表格标签主要为了显示表格，展示数据的作用

<table></table> 用来定表格标签
<tr></tr> 用来定义表格中的行
<td></td>用来定义表格中的单元格（table data）
<th></th>用来表示HTML表格的头部分（一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示）
align 规定表格相对周围元素的对齐方式（可以有left, right, center）
border 规定表格但愿是否拥有边框，默认为没有(""或1)
cellpadding 规定单位边沿与其内容之间的空白，默认为1像素
cellspacing 规定单元格之间的空白，默认为2像素
width 规定表格的宽度（这里可以为像素或者百分比）
<thead></thead>用于定义表格的头部，<thead>内部必须拥有<tr>的标签，一半用于第一行
<tbody></tbody>用于定义表格的主体，主要用于放数据本体。
rawspan 跨行合并（如<td rawspan = "2"></td>, 注意：合并完单元格要删除多余的单元格）
*colspan 跨列合并(如<td colspan = "2"></td>， 注意：合并完单元格要删除多余的单元格）

<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>

<table> 
    <tr>
        <th>姓名</th>
    </tr>
</table>

9. 列表标签

列表标签主要分为三个类别分别是：无序标签， 有序标签和自定义标签。

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义

<ul> 
    <li>列表项1</li> 
    <li>列表项2</li> 
    <li>列表项3</li> 
...
</ul>

<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项

<ol> 
      <li>列表项1</li>
      <li>列表项2</li> 
      <li>列表项3</li> 
      ...
</ol>

<dl> 标签用于定义描述列表(或定义列表)，该标签会与 <dt>(定义项目/名字)和 <dd>(描述每一个项目/名字)一起使用

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

10. 表单

表单主要为了收集用户信息，在 HTML 中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。

（1）表单域
表单域是一个包含表单元素的区域，在HTML标签中，<form>标签用于定义表单域，以实现用户信息收集和传递。

<form action=“url地址” method=“提交方式” name=“表单域名称"> 
各种表单元素控件
</form>

action 用于制定url地址
method 用于设置表单数据提交方式，是get还是post
name 用于制定表单的名称，以区分同一个页面的多个表单域

（2）表单控件
表单控件分为三个input, label, select, textarea
【1】input(这里注意为单标签)
<input type="属性值" />
这里的type有一下属性：
button 定义可点击按钮，多数情况可通过JavaScript启动脚本
checkbox 定义复选框
file 定义输入字段和浏览按钮，供文件上传, 可以有界面的选择文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送给服务器
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

这里除了input外还有其他标签，如下所示：
name 定义input元素的名称， 对于单选/复选框必须有相同的名字才能支持单选功能
value 规定input元素的值， 可以给value一个默认的值
checked 规定此input元素首次加载时应当被选中
maxmargin 规定在输入字段的字符最大长度

【2】label标签
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验，如下我鼠标点击男，相当于sex这个单选按钮

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

【3】select标签
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表(<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。)

<select> 
        <option>选项1</option> 
        <option>选项2</option> 
        <option  selected =“ selected " >选项3</option> 
        ...
</select>

【4】textarea标签
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。(rows表示行数，cols表示列数)

<textarea rows="3" cols="20">
文本内容
</textarea>

五、总结

5.1 网页总结

页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html) 网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如图片标签链接标签视频标签等...

5.2 html头总结

<!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
<html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
<meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.

网络编程（一）之HTML

一、网页

二、常用浏览器及内核

三、 Web标准

四、 HTML语法规范

1. 基本HTML语法概述

2. 第一个HTML

3. 文本类型声明标签

4. HTML 常用标签

1. 标题标签

2. 段落标签

3.换行标签

4. 格式化标签

5. div和span标签

6. 图像标签及路径

7. 超链接标签

8. 锚点连接

8. HTML 注释及特殊字符

9. 表格标签

9. 列表标签

10. 表单

五、总结

5.1 网页总结

5.2 html头总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术

网络编程（一）之HTML

一、网页

二、 常用浏览器及内核

三、 Web标准

四、 HTML语法规范

1. 基本HTML语法概述

2. 第一个HTML

3. 文本类型声明标签

4. HTML 常用标签

1. 标题标签

2. 段落标签

3.换行标签

4. 格式化标签

5. div和span标签

6. 图像标签及路径

7. 超链接标签

8. 锚点连接

8. HTML 注释及特殊字符

9. 表格标签

9. 列表标签

10. 表单

五、总结

5.1 网页总结

5.2 html头总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术

二、常用浏览器及内核