一些常用英文

Keywords 关键字

Description 描述

Author 作者

Charset 字符集

Refresh 刷新

Content 内容

Head 标签下的

meta 标签

http--equiv 属性

1、定义网页所实用的编码

简写为： <meta charset=”utf-8”>

网页出现乱码，很可能没有定义编码。注意一定要放在最前面

2、定义网页自动刷新跳转

定义网页 6s 之后刷新

Content = “ 时间，跳转的网页”

Style 样式标签

Script 标签定义页面 javascript 代码

Link 标签：引入外部css 文件

<link type=”text/css” rel=”stylesheet” href=”css/index.css”>

Type: 定义文件类型

Rel是 relationship的缩写，指的是定义链接文件和HTML 的关系，意思：关系

Stylesheet：样式表，外部样式表

Href 理解为文档文件的路径

Body 标签

<h> 标题标签

更新时间：2022/6/27 13:28

注释标签的内容不会显示在浏览器上面

<H1> 标题标签

<p></p> 段落标签，段落会自动换行，并且段落和段落之间会有一定的距离

<br /> 文字换行标签

常用的文本标签 --- 对文本修饰

粗体标签：strong、b

strong标签和b标签的效果是一样的，实际开发中尽量实用strong标签，strong标签更具有语义化

斜体标题：i、em、cite
em标签同理，实际开发的过程就使用具有语义化的标签，i 和 cite 不建议实用

上标标签：sup
sup标签实现效果是文字在上方

下表标签：sub
sub标签实现效果是文字在下方

中划线标签：s
中划线又叫删除线，常见于某宝商品促销活动价格，但是，对于删除线效果一般用css来实现

下划线标签：u
u标签，文本下划线效果，但我们一般用 css 来实现这个效果

大字号标签：big

小字号标签：small
大小字号标签，在实际开发中也很少会用到，字体大小一般用css 控制

<hr /> 水平线

<div></div> 盒子标签，常用来划分HTML结构，配合css控制某一块的样式

一般标签和自闭合标签的区别

一般标签：由于有开始和结束符号，因此可以在内部插入其他标签或者文字

自闭合标签：只有开始符号没有结束的符号，所以它不可以插入其他标签文字，所谓的“自闭合”，指的就是本来需要配合一个结束的符号来关闭，但它却自己关闭了

需要注意的是，在HTML5的标准中，自闭合标签中的 “/” ，可有可无。

常见的自闭合标签

<meta /> 定义网页的信息（供搜索引擎看查看）

<link /> 引入 “外部CSS文件”

<br /> 换行标签

<hr /> 水平线标签

<img /> 图片标签

<input /> 表单标签

元素又叫标签，一个意思

块元素（block）和行内元素（inline）

在HTML中，块元素会独占一行，以下是常见的块元素

h1 -- h6 标题元素

p 段落元素

div div元素

hr 水平线

ol 有序列表

ul 无序列表

注意，块元素会排斥其他元素，但是块元素可以容纳其他行内元素和块元素

行内元素可以和其他行内元素在同一行，此外，行内元素的内部可容纳其他行内元素，但是不可以容纳块元素

strong 粗体元素

em 斜体元素

a 超链接

span 常用的行内元素，一般结合css使用

特殊符号

常见的特殊符号

空格		空格（一个汉字等于三个字符）"
""	"	双引号
‘	‘	左单引号
’	&requo	右单引号
x	×	乘号
/	÷	除号
>	>	大于号
<	<	小于号
&	&	与
-	&mdsh;	长破折号
\|	\|	竖线

较少实用的特殊符号

`§`	分节符	`§`
`©`	版权符	`©`
`®`	注册商标	`®`
`™`	商标	`™`
`€`	欧元	`€`
`£`	英镑	`£`
`¥`	日元	`¥`
`°`	度	`°`

总结：常见的特殊符号需要记住。

更新时间：2022/6/29 11:09

列表分：有序列表、无序列表和定义列表

<ol></ol> ordered list 有序列表

<ul></ul> unordered list w 无序列表

<li></li> list 列表

这两个一般会结合一起使用，例如：

<!DOCTYOE html>
<html><head><meta charset="utf-8" /><title> 有序列表</title></head><body><ol><li>HTML</li><li>CSS</li><li>JS</li><li>PHP</li></ol></body>
</html>

ol 有type 属性，默认是 type属性是 ” 1 ”

后期序列用css控制，使用 list-type 属性

属性值	展示效果
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

<ul></ul> 是无序列表，一般配合<li> 使用，默认为 ● ，可以使用type 改变属性、

ul 和 ol 都是配合 li 使用，不可以单独使用，而且 ul 和 ol 标签的子标签一定是 li

type 属性：

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
squre	正方形■

在实际开发中，一般使用 ul（无序列表），在 ul 的子标签里面只能是使用 li 作为子标签，不用使用其他标签，也不能直接写文本。

定义列表

<dl></dl> 定义列表，dl 即definition list

<dt></dt> 定义名词 dt 即definition term（定义名词）

<dd></dd> 定义描述 dd 即definition descritption 定义描述

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title>
</head>
<body><dl><dt>html</dt><dd>制作网页的标准语言</dd><dt>css</dt><dd>层叠样式</dd></dl>
</body>
</html>

浏览器效果

6.2 表格的基本结构

1、表格：table标签

2、行：tr 标签

3、单元格：td标签

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">table,tr,td{border: 1px solid silver;}</style>
</head>
<body><table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td></tr></table>
</body>
</html>

说明

tr 指的是，table row （行）

td 指的是，table data tell （表格单元格）

table: 整个表格

border：1px solid silver --- 宽度1像素， solid 实线， silver 银白色

完整结构

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">table,tr,td{border: 1px solid silver;}</style>
</head>
<body><table><caption>标题</caption><tr><th>表头单元格1</th><th>表头单元格2</th><th>表头单元格3</th></tr><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td></tr></table>
</body>
</html>

总结： 1、在表单中首先使用的是 table

2、1标题，每个表单中只能有一个标题

3、tr 表行

4、th 表头单元格、 td 表格单元格

5、使用标签要具有语义化，不能混淆使用。

在table 标签里面，为了增加代码的可读性，引入了 thead（表单头部）、tbody （表单身体）和 tfoot（表单脚部），这样写出来的代码可对性更强。

他们从语义上分了表头表身和表脚，thead 和 tbody 是很重要的标签，tfoot 比较少用到

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">table,tr,td,th{border: 1px solid silver;}</style>
</head>
<body><table><caption>标题</caption><!-- 表单标题 --><thead><!-- 表单头部 --><tr><th>表头单元格1</th><th>表头单元格2</th><th>表头单元格3</th></tr></thead><tbody><!-- 表单身体 --><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr></tbody><tfoot><!-- 表单脚部 --><tr><td>单元格4</td><td>单元格5</td></tr></tfoot></table>
</body>
</html>

合并单元格

rowspan 合并行

colspan 合并列

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">table,tr,td,th{border: 1px solid silver;}</style>
</head>
<body><table><caption>标题</caption><!-- 表单标题 --><thead><!-- 表单头部 --><tr><th colspan="3">表头单元格1</th></tr></thead><tbody><!-- 表单身体 --><tr><td colspan="2">单元格1</td><td>单元格3</td></tr></tbody><tfoot><!-- 表单脚部 --><tr><td>单元格4</td><td rowspan="2">单元格5</td><td rowspan="2">单元格6</td></tr><tr><td>单元格7</td></tr></tfoot></table>
</body>
</html>

更新时间：2022/7/1 14:20

<a></a> 超链接标签

href 路径

target 属性，里面的值有四个

属性值	说明
_self	默认值，在原来窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

一般情况下，我们用的最多的是_blank 这个值

上面的是网页跳转，还有一种比较常见的是瞄点跳转

原理是，写一个a 标签，跳转目的地设为某个模块的ID进行跳转（不刷新网页）

需要注意的是href 属性用ID作为跳转的时候，要在ID前面加 #号

<div><a href="#article">推荐文章</a><br /></div>……<br />……<br />……<br />……<br /><div id="article"><h3>推荐文章</h3><ul><li>朱自清-荷塘月色</li><li>余光中-乡愁</li></ul></div>
</div>

表单

主要有几个重要标签

form、input、textarea、select、option

form 的属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

method 的提交方式有 get 和 post

action 提交地址例如：<form action="index.php"> </form>

target 一般使用 _blank 和a 标签一样

enctype 在表单发送在服务器之前进行编码，默认为空格变成 + 号，特色符号转为 ASCLL HEX 值。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 "+" 加号，但不对特殊字符编码。

值

描述

application/x-www-form-urlencoded

在发送前编码所有字符（默认）

multipart/form-data

不对字符编码。

在使用包含文件上传控件的表单时，必须使用该值。

text/plain

空格转换为 "+" 加号，但不对特殊字符编码。

input 是自闭合标签，他的type属性值

text 单行文本

属性： value=“文本框默认文字”

size=“设置文本框的长度”
maxlength=“设置文本框字符的长度”

password 密码文本框

密码文本框的属性和text文本框的一样，只是输入的内容是不可见的（仅仅是不可见，密码内容没有安全性）

radio 单选框

checkbox 多选框

button（普通按钮）、submit（提交按钮）、reset（重置按钮）按钮

实现按钮都是用input 的 type 属性实现的，input 的单选和多选加相同的name属性是为了让他们归为同一组按钮，实现单选或者多选

注意单选按钮一定要加上 name 属性

例如：

<input type = “redio” name=“gender” / > 单选框

<input type = “checkbox” name=“gender” checkbed /> 多选框

checked 为默认选中，checked是html5的缩写，

等价于 checked === checked=“checked”

<input type = “button” value="取值 " /> 普通按钮

<input type = “submit” value="取值 " /> 提交按钮

<input type = “reset” value="取值 " /> 重置按钮

注意：普通按钮一般情况下要配合js来实现操作

提交按钮一般都是用来给服务器提交数据的

重置按钮一般用来清除用户在表单中输入的内容

还有一种比较少用到的是自定义标签 <button></button>

file 文件上传

textarea 多文本标签语法
<textarea row="行数" col="列数" value="取值"> 默认的内容</textarea>

例如：

<textarea row="5" col="5" value="">请作自我介绍</textarea>

</form>

总结，html有3中文本框，分别为单行文本、密码文本、多行文本

其中单行文本和密码文本框用input标签

多行文本框使用textarea标签

select 和 option 下拉列表和下拉列表的元素

这两个标签和ul 和 li 标签一样，需要配合使用

<option>选中的内容</option>

</select>

select的属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

multiple 属性

列如：

</select>

</form>

multiple 设置下拉列表为多选，默认为一个，使用ctrl + 鼠标左键就可以选中

size 属性默认下拉列表显示一个，size设置可以显示多个

注意，谷歌浏览器不能设置为4个，没有效果

 <form method="post"><select size="5"><option>HTML</option><option>CSS</option><option>jQuery</option><option>JavaScript</option><option>Vue.js</option><option>HTML5</option><option>CSS3</option></select></form>

option 标签的属性

selected	是否选中
value	选项值

selected 和 input 的 checked 的效果一样

默认选中项

<form method="post"><select size="5"><option>HTML</option><option>CSS</option><option selected>jQuery</option><option>JavaScript</option><option>Vue.js</option><option>HTML5</option><option>CSS3</option></select></form>

在我们设置了显示长度 size = "5" 之后，使用selected 默认选中项是没有value值的，这时候只要我们去掉 size = "5" 之后能解决这个问题

value 属性所有的value 属性的功能基本一样

iframe标签

我们可以使用iframe实现一个内嵌框架，简单来说就是在当前网页再新建一个网页

src 是链接地址

width 和 height 是宽度和高度

iframe 是我们用到的，像frameset 和 frame标签已经在html5废弃了，只需要用 iframe就好了

完结

时间：2022/7/1 17:40

初入编程 - HTML + CSS相关推荐

初入HTML和CSS
初入HTML和CSS 1.1 HTML.CSS 1.2 如何去写代码?写到哪里去 1.3 宇宙第一编辑器 VS Code VS Code的基本使用 1.4 浏览器 1.5 深入了解网站开发 1.6HT ...
编程语言之父：六条经典格言送给初入编程界的你
来源:编程语言之父:六条经典格言送给初入编程界的你 - 知乎大多数编程语言之父都是编程所耽误的语言大师. 他们的编程思想深刻而有趣. 程序员合作伙伴总是可以从他们的评论中获得灵感,并从他们的经验中学 ...
【初入编程】自我简介
目录初学编程这里主要介绍的是我在编程方面的计划 1.首先做个自我介绍. 2.今后对自己编程的目标. 3.学习编程的打算 4.对于编程投入的时间以及向往的工作初学编程这里主要介绍的是我在编程方面 ...
初入编程吓破胆？那是你还不懂这些！（高能预警）
这里是目录哟!(长文警告!) 01 这门语言是否真的很难? 02 这门语言到底能干嘛? 03 我应该把它学习到怎样一个程度? 04 我学不会怎么办? 05 我应该怎么去学习它? 很多刚开始学习C语言的 ...
初入Shell编程，了解规范与变量
初入Shell编程,了解规范与变量一.Shell脚本简介 1.1 Shell脚本概述 1.2 Shell脚本应用场景 1.3 Shell脚本的作用 1.4 shell脚本构成二.Shell脚本的编 ...
python while循环if_初入python 用户输入，if，（while 循环）
python 基础编译型: 一次性将所有程序编译成二进制文件. 缺点:开发效率低,不能跨平台优点:运行速度快. :c ,c++语言等等.... 解释行:当程序执行时,一行一行的解释. 优点:开发 ...
初入前端框架bootstrap--Web前端
Bootstraps是一种简洁.直观.强悍的前端开发框架,它让web开发更迅速.简单.对于初入Bootstrap的小白,高效进入主题很重要,能为我们节省很多时间,下面我将对使用Bootstrap开发前 ...
初入职场，菜鸟北漂记
2014年3月初,带着梦想,带着一股傻气("没错是傻气,而不是杀气"),离开了遥远的家,离开了让人眷恋的学校,单枪匹马的闯入了传说中的帝都-- 帝都已经来过好几次了,可是每一次所扮 ...
Java学习—初入Java
一.初入Java 文章目录一.初入Java 2.JDK的目录介绍 3.PATH环境变量 4.ClassPath环境变量 5.编写第一个Java程序 6.Java的运行机制 7.Java包的定义与使用 ...

初入编程 - HTML + CSS

块元素（block）和行内元素（inline）

6.2 表格的基本结构

合并单元格

表单

option 标签的属性

初入编程 - HTML + CSS相关推荐

最新文章

热门文章

初入编程 - HTML + CSS

块元素（block） 和 行内元素 （inline）

6.2 表格的基本结构

合并单元格

表单

option 标签的属性

初入编程 - HTML + CSS相关推荐

最新文章

热门文章

块元素（block）和行内元素（inline）