ぼくのBLOG
Just For Fun
Search
HTML SUMMARY
HTML SUMMARY
学习思考|Aug 14, 2022|
Last edited 2022-8-14
type
Post
status
Published
date
Aug 14, 2022
slug
HTML-NOTE
summary
HTML学习笔记
tags
HTML
category
学习思考
icon
password
Property
Aug 14, 2022 08:50 AM
基本信息与介绍Web标准VSCODE使用标签语法规范基本结构标签常用标签 Text Elements图像 image 标签文件与路径可选属性：超链接 Hyperlinks链接分类注释和特殊字符注释 comment特殊字符列表标签 TextElements_Lists无序列表 UnorderedList注意：有序列表 OrderedList注意：自定义列表表格标签注意：表格属性表结构标签合并单元格表单标签表单域表单控件（元素）属性值typelabel标签select 下拉表单元素textarea 文本域元素Structuring our page查阅文档

基本信息与介绍

HTML
全称：“Hyper Text Markup Language”
中文：“超文本标记语言”
定义：
“HTML is a markup language that web developers use to structure and describe the content of a webpage(not a programming language)”
HTML 是 Web 开发人员用来构建和描述网页内容的标记语言（不是编程语言）。
基本内容：
“HTML consists of elements that describe different types of content:paragraphs,links,headings,images,video,etc.”
HTML 由描述不同类型内容的元素组成：段落、链接、标题、图像、视频等。
基本结构：
“Opening tag:Name of the element,wrapped in < and >
Content:Content of the element,in this example text.But it might be another element(child element).Some elements have no content(e.g.
)
Closing tag:Same as opening,but with a /.When element has no content,it’s omitted.”
开始标签：元素的名称，用 < 和 > 包裹
内容：元素的内容，在本例中为文本。但它可能是另一个元素（子元素）。某些元素没有内容（例如
）
结束标记：与开始相同，但带有/。当元素没有内容时，省略。

Web标准

结构（Structure） 对网页元素进行整理分类，主要是HTML
表现（Presentation）设置网页元素的版式颜色等外观样式，主要是CSS
行为（Behavior）网页模型的定义及交互的编写 主要是Javascript

VSCODE使用

  1. 创建HTML文件
  1. 打出”!”，选择第一个选项。将会自动生成HTML骨架。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
<!DOCTYPE> 文档类型声明标签，不是html标签，声明HTML版本 <!DOCTYPE html>声明为HTML5 必须处于文档第一行，
标签之前
lang 语言种类 en定义为英语 zh-CN定义为中文 定义为en为英文网站，zh-CN为中文网站 但是中文英文并不排斥
charset 字符集 在 内，通过 标签的charset属性规定HTML文档应该使用哪种字符编码
  1. 写完代码后，右键Open In Default Browser
      2. ​

标签

语法规范

1.标签是由尖括号包围的关键词。
2.大多数标签成对存在，且结束标签要加上’/’。
3.只有少量标签是单个存在。
4.标签关系分为包含关系和并列关系

基本结构标签

页面都是由一个基本的结构标签组成，页面内容也是在基本标签上书写。
<!DOCTYPE html>
<html>
	<head>
   <title>The Basic Language of the web:HTNL</title>
  </head>
	<body>
		<h1>The Basic Language of the web:HTNL</h1>
	</body>
</html>
<html></html> :HTML标签 页面中最大的标签，成为根标签 <head></head> :文档头部 在head标签中必须设置的是title <title></title> :文档标题 让页面拥有标题 <body></body> :文档主体 元素包含文档所有内容
 

常用标签 Text Elements

标题标签 TitleElemnt： <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 六个等级的网页标题
 
段落标签 ParagraphElement： <p></p> 将文档分为若干段，段落之间会有空隙
 
换行标签 ：<br />将文本强制换行显示
 
文本格式化标签:
加粗 bold：<strong></strong>或<b></b> 倾斜 italic： <em></em>或<i></i> 删除线<del></del>或<s></s> 下划线<ins></ins>或<u></u>
 

图像 image 标签

<img src='图像のurl' [属性] [属性].../>
src是<img>标签的必须属性，指定图像的路径和文件名。
 

文件与路径

目录文件夹：存放我们做页面所需的素材
根目录：打开目录文件夹的第一层就是根目录
相对路径：
以应用文件所在位置为基础参考建立出的目录路径，即图片相对于HTML文件的位置。
同一级路径
下一级路径 /
上一级路径 ../
 
绝对路径：
目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
本机地址或者网络地址
 

可选属性：

alt 文本 图片不能显示时显示的蚊子 title 文本 鼠标放在图片上时显示的问题 width 像素 图片宽度 height 像素 图像高度 border 选告诉 图像边框粗细
属性与属性之间通过空格分隔
 

超链接 Hyperlinks

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

链接分类

1.外部链接：输入完整url路径。
2.内部链接：网页内部之间的相互链接，直接链接内的页面名称即可。
3.空链接：没有确定的链接目标时，使用”#”代替。
4.下载链接：如果href时一个文件或压缩包，则会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，比如文本，图像，表格等都可以添加超链接。
 
6.锚点链接：点击链接可以快速定位到页面中的某个位置。
在href属性值，设置属性为#名字的形式，如第二季
找到目标位置标签，在里面添加一个id属性=刚才名字，如：<h3 id=”two”>第二季介绍</h3>
 

注释和特殊字符

注释 comment

以<!--开头，以-->结尾
例：<!--Contnet-->

特殊字符

空格符  &nbsp; 小于 &lt; 大于 &gt; 其余用的很少
 

列表标签 TextElements_Lists

分为无序列表，有序列表，自定义列表。

无序列表 UnorderedList

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

注意：

1.无序列表的各个列表项之间是没有顺序级别之分的，是并列的。
2.<url>中只能嵌套<li>，直接在<url>标签中输入其他标签或者文字是不允许的。
3.<li>相当于一个容器，可以容纳所有元素。
4.无序列表拥有自己的属性，但是实际使用时，通常使用CSS。
 

有序列表 OrderedList

字面意思，有序排列的列表。
<ol>
	<li></li>
	<li></li>
	...
<ol>

注意：

与无需列表要求基本相同
 

自定义列表

用于对术语或者名词进行解释和描述。
<dl>
	<dt>名词1</dt>
	<dd>名词1解释</dd>
	<dd>名词1解释</dd>
</dl>

表格标签

用于显示,展示数据。
<table>
 <tr>
   <td>单元格内的文字</td>
   <th>文字</th>
    ...
 </tr>
 ...
</table>

注意：

1.<table>用于定义表格的标签 2.<tr>用于定义表格中的行，必须嵌套在<table>内 3.<td>用于定义表格中的单元格，必须嵌套在<tr>内 4.<th>表头单元格标签，一般位于表格的第一行或第一列，里面文本内容加粗居中显示。
 

表格属性

实际开发中，常用CSS来设置。
这些属性都要写到<table>里面去。
align：left/center/right 规定对齐方式
border：1/”” 规定表格单元是否有边框，默认为”“无边框
cellpadding：像素值 规定单元边沿与其内容之间的空白
cellspacing：像素值 规定单元格之间的空白
width：像素值或百分比 规定表格的宽度
 

表结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割为表格头部和表格主体两大部分。
通过<thread>标签表格的头部区域
通过<tbody>标签 表格的主题区域

合并单元格

跨行合并：rowspan=’合并单元格个数’
跨列合并：colspan=’合并单元格个数’
 
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
步骤：
1.确定是跨行还是跨列
2.找到目标单元格，写上合并方式=”合并单元格数量 比如<td colspan=”2”></td>
3.删除多余单元格
 

表单标签

用途：为了收集用户信息。
组成：表单域，表单控件（元素），提示信息

表单域

定义：包含表单元素的区域。
<form>将结果发送给服务器。
<form action="url地址" method="提交方式get/post" name="表单域名称">	
  各种表单元素控件
   ...
</form>
 

表单控件（元素）

input 输入表单元素,收集用户信息。
<input type="属性值" />

属性值type

button 按钮，多数情况下和js搭配使用 checkbox 复选框 file 输入字段和浏览按钮，供文件上传 hidden 隐藏的输入字段 image 图像形式的提交按钮 password 密码字段，字符被掩码 radio 单选按钮 reset 重置按钮，重置表单的所有数据 submit 提交按钮，将表单数据发送的服务器 text 单行的输入字段，输入文本，默认20字符
 
name 用户自定义值 定义input元素的名称，单选按钮则定义相同的值 value 用户自定义值 定义input元素的值 checked checked 规定input元素首次加载到时应当被选中，默认值 maxlength 正整数 输入字符的最大值
name和value主要由后台人员使用。 name表单元素的名字，要求单选按钮和复选框有相同的name值
 

label标签

用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器将自动将焦点转移到对应的表单元素上。 例: <label for="sex">男</label> <input type="radio" name="sex" id-"sex" /> "for"的值和"id"的值需要一致
 

select 下拉表单元素

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	...
</select>
<option>中定义selected="selected"设置为默认选项
 

textarea 文本域元素

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

Structuring our page

<nav></nav> for navigation
<header></header>for header
<article></article>for article
<footer></footer>for footer
<div></div>for no meaning

查阅文档

http://developer.mozilla.org/zh-CN
 
  • HTML
    • MyDjango NotesCSS SUMMARY
    Catalog
    0%