Web前端开发学习笔记（一）

最新推荐文章于 2024-03-29 21:35:38 发布

SkywalkerHD

最新推荐文章于 2024-03-29 21:35:38 发布

阅读量1.9k

点赞数 4

分类专栏：学习笔记文章标签：前端 HTML 学习笔记 Web编程

本文链接：https://blog.csdn.net/weixin_44363959/article/details/96128525

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

Day 1

课程内容

一、字符编码

字符编码（英语：Character encoding）也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉冲），以便文本在计算机中存储和通过通信网络的传递。

常见的字符编码：

1. GBK

GBK全称《汉字内码扩展规范》（GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification），中华人民共和国全国信息技术标准化技术委员会1995年12月1日制订，国家技术监督局标准化司、电子工业部科技与质量监督司1995年12月15日联合以技监标函1995 229号文件的形式，将它确定为技术规范指导性文件。这一版的GBK规范为1.0版。

2. UTF-8

UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，由Ken Thompson于1992年创建，现在已经标准化为RFC 3629。UTF-8用1到4个字节编码Unicode字符。用在网页上可以统一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。

本阶段学习我们主要使用的是UTF-8编码。

二、HTML的结构


<html>
	<head>
		<title>这是一个测试</title>
	</head>
	<body>
		测试
	</body>
</html>

< html >元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据，如 < meta charset=“utf-8” > 定义网页编码格式为 utf-8。
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容

三、HTML的标签

1. < h >标签
标题（Heading）是通过 < h1 > - < h6 > 标签进行定义的。
< h1 > 定义最大的标题。 < h6 > 定义最小的标题。
< hr > 标签在 HTML 页面中创建水平线。

<h1>我是中国人</h1>
<h2>我是中国人</h2>
<h3>我是中国人</h3>
<h4>我是中国人</h4>
<h5>我是中国人</h5>
<h6>我是中国人</h6>
<hr/> <!--我是水平线-->

效果：

我是中国人

2. < p >标签
段落是通过 < p > 标签定义的。

<p>我是段落</p>
<p>我也是段落</p>

我是段落

我也是段落

3. < a >标签（超链接）
HTML使用标签 < a >来设置超文本链接。
格式：
< a href=“url” target=“目标窗口”>链接文本< /a>
目标窗口：_blank 新窗口打开_parent 在原窗口打开

<a href="http://www.baidu.com/" target="_blank">在新窗口打开百度</a>
<a href="http://www.baidu.com/" target="_parent">在当前窗口打开百度</a>

效果：
在新窗口打开百度
 在当前窗口打开百度

锚记

同一个页面的不同位置
位置定义名称< a id=”name”>< /a>
链接< a href=”#name”></ a>
不同页面的不同位置
位置定义名称< a id=”name”></ a>
链接< a href=”文件名#name”>< /a>

4. 文本格式标签
< b >加粗
< strong >加粗
< del >删除线
< i >倾斜
< em >倾斜
< sub >下标
< sup >上标
< small >变小
< pre >预格式化

<b>我是加粗</b>
<strong>我也是加粗</strong>
<del>我是删除线</del>
<i>我是倾斜</i>
<em>我也是倾斜</em>
文本<sub>我是下标</sub>
文本<sup>我是上标</sup>
<small>我是变小</small>
<pre>我是预格式化</pre>

效果：
我是加粗
我也是加粗
~~我是删除线~~
我是倾斜
我也是倾斜
文本_我是下标
文本^我是上标
我是变小

我是预格式化

5. < img >图片标签
HTML使用< img> 标签来添加图片
格式：< img src=“图片路径” alt=“图片描述” width=“宽” height＝"高" title=“图片标题”/>

< img src="./img/logo.jpg"  alt="加载失败" width="200" height＝"100" title="图片标题"/>

效果：
<img src="./img/logo.jpg" alt=“加载失败” width=“200” height＝"100" title=“图片标题”/>

6. < ul >< ol > 列表标签
无序列表：
无序列表是一个项目的列表，默认使用粗体圆点（典型的小黑圆圈）进行标记。（Type类型：disc、square、circle）

<ul>
<li>北京市</li>
<li>上海市</li>
<li>广州市</li>
</ul>

北京市
上海市
广州市

有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记。（Type类型：A、a、1、I、i）

<ol>
<li>北京市</li>
<li>上海市</li>
<li>广州市</li>
</ol>

北京市
上海市
广州市

7. < table > 表格标签
表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 < th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <tr>
        <th rowspan="3">中国城市</th>
        <th>直辖市</th>
        <th colspan="2">地级市</th>
    </tr>
    <tr>
        <td>北京市</td>
        <td >广州市</td>
        <td>南京市</td>
    </tr>
    <tr>
        <td>上海市</td>
        <td>深圳市</td>
        <td>苏州市</td>
    </tr>
</table>

中国城市	直辖市	地级市
	北京市	广州市	南京市
	上海市	深圳市	苏州市

< border> 边框线
< width> 宽度
< bgcolor>背景色
< cellpadding> 单元格填充
< cellspacing> 单元格间距
合并列 colspan
合并行 rowspan

8. < form > 表单标签
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置:

<form action=”提交目标地址” method=”get/post”>
</form>
<input type=”text”/>单行文本框
<input type=”password”/>密码框
<input type=”radio”/>单选项
<input type=”checkbox”/>复选框
<input type=”number”>数值类型
<textarea ></textarea> 多行文本框

常见属性：min (最小值) max（最大值） maxlength （最大长度） size （可见宽度） required （必填项） placeholder （提示信息）

下拉菜单：

<select >
  <option value="" selected disabled></option>
</select>

//selected默认选中 disabled 禁用项

下拉列表

<select multiple size="2">
  <option value="" selected disabled></option>
</select>

Multiple 列表展示 size=“2” 展示几行

预定义控件

<input list=”idname”
<datalist id="name">
            <option value="Internet Explorer">
</datalist>
//id和list名称一致

按钮：

<input type="submit"/>
        <input type="reset"/>
        <input type="button" value="确定"/>
        <button>取消</button>

特殊情况：

<label for="agree"><input type="checkbox" id="agree"/>同意以上协议</label>

三、行块级元素

常见行内元素: a，span，img，input，select，strong，label，b
常见块级元素：p，div，ul，ol，dl，table，h1，form

切换方式：
Display:block，inline-block

SkywalkerHD

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习笔记（一）

Day 12019年7月5日，我加入西部开源所上的第一天课，由于没上之前的课程，学校安排了补课给我们，这次主要讲的是前端开发最基础的部分，HTML和CSS。以下是本次课程的主要内容总结。（学习笔记内容和正式上课内容相同）课程内容一、字符编码字符编码（英语：Character encoding）也称字集码，是把字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列、8位组或者电脉...
复制链接

扫一扫