HTML基础学习笔记_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

1、页面

正文

2、字体

逻辑字体

.........

.......

7、闪烁

......

     Document  中间" >......)
    ...
 #=left, center, right
 3、文字的分区显示   
...
            #=left, center,  right
 4、列表   无序列表：
.........

   有序类表:
..........
   定义列表：
......
.....

   定制表中的标记：
 #=disk,circle,square
   定制有序列表表中的序号: #=A,a,I,i,1
 5、预格式化文本   
.........
로그인 후 복사
   
.....
   
......
 6、块引用:   
.......
 7、闪烁   ......
        Document  中间
								
																
									定制列表元素
								
																
									定制列表Today
Today is yesterday.
TomorrowTomorrow is today.有序列表
								
																
									4、图像

								
																
									5、表格
								
																
									6、表单
								
																
									7、移动的文字

집

웹 프론트엔드

HTML 튜토리얼

HTML基础学习笔记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

1、页面

1、文件结构

......

.......

<HTML><HEAD>     <title>, <base>, <link>, <isindex>, <meta></HEAD><BODY>  <h1 id="正文">正文</h1></BODY></HTML>

로그인 후 복사

2、语言字符集信息

基本上所有的网站的网页都有，现在一般都是UTF-8,和GBK2312

3、背景色彩和文字色彩

bgcolor --- 背景色彩
text --- 非可链接文字的色彩
link --- 可链接文字的色彩
alink --- 正被点击的可链接文字的色彩
vlink --- 已经点击(访问)过的可链接文字的色彩

（颜色RGB16进制）

背景图象

4、页面空白(试了貌似不管用)

页面左边的空白

页面上方的空白(天头) #=margin amount

5、连接

有下划线的连接

< name="#">无下划线不像链接

默认的是在原来的窗口打开

target="Window_Name" (打开一个新的窗口属性)

下面百度是在新窗口打开

<a href="  target="Window_Name">百度</a>

로그인 후 복사

6、标尺线

标尺线的高度：

例如：

标尺线的宽度：

例如：

标尺线的位置：

#=left, right

例如：

标尺线的颜色：

例如：

<!doctype html><html> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <title>Document</title> </head> <body  bgcolor=#ff0033 text=#00ff99 link=#000099 alink=#330099  vlink=##66cc33>  <h1 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h1><h2 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h2><h3 id="This-nbsp-is-nbsp-a-nbsp-heading">This is a heading</h3><a href="http://www.baidu.com">百度</a><br/><a name="http://www.baidu.com">百度1</a><hr><hr size=20><hr width=50><hr width=50%><hr width=50%><hr width=50%><hr noshade><hr color=#000000 > </body></html>

로그인 후 복사

2、字体

1、标题字体

字体由大到小

这些标记显示黑体字，自动插入空行

2、字体大小

....#=1,2,3,4,5,6,7

3、物理字体

加粗：....

斜体：.....

下划线：....

打字机文本：...

上标注：

下标注：

删除文本定义:

<!doctype html><html> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body>  <b>加粗</b><hr>  <i>斜体</i><hr/>  <u>下划线</u><hr/>  <tt>打字机文本</tt><hr/>  <sup>上标注</sup><hr>  <sub>下标注</sub><hr>  <s>可定义删除文本</s><hr>  <strike>可定义删除文本</strike><hr> </body></html>

로그인 후 복사

4、逻辑字体

强调字体倾斜：

强调字体加粗：

用于表示计算机源代码或者其他机器可以阅读的文本内容:

短语标签:

键盘文本：

变量的名称

对特殊术语或短语的定义

注释作用：

小型文本：

大字号:

<!doctype html><html> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body>  <b>加粗</b><hr>  <i>斜体</i><hr/>  <u>下划线</u><hr/>  <tt>打字机文本</tt><hr/>  <sup>上标注</sup><hr>  <sub>下标注</sub><hr>  <s>可定义删除文本</s><hr>  <strike>可定义删除文本</strike><hr>  <h1 id="逻辑字体">逻辑字体</h1>  <em>强调字体倾斜</em><hr>  <strong>强调字体加粗</strong><hr>  <code>用于表示计算机源代码或者其他机器可以阅读的文本内容</code><hr>  <samp>短语标签</samp><hr>  <kdd>键盘文本</kdd><hr>  <var>变量的名称</var><hr>  <dfn>对特殊术语或短语的定义</dfn><hr>  <cite>注释作用</cite><hr>  <small>小型文本</small><hr>  <big>大字号</big> </body></html>

로그인 후 복사

物理风格直接指定字体的“样式”（如粗、斜、下划线）；

逻辑风格则是指定文本的“作用”（如示例文字、缩小文字）。

就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用。

5、字体颜色

.....

6、客户端字体

7、字符实体

&           &<            <>            >"          "

로그인 후 복사

3、文字布局

1、行的控制

空行:

换行：

不换行

2、文字的对齐

... (

......)

...

#=left, center, right

3、文字的分区显示

...

#=left, center, right

4、列表

无序列表：

.........

有序类表:

..........

定义列表：

......: .....

定制表中的标记：

#=disk,circle,square

定制有序列表表中的序号:

#=A,a,I,i,1

5、预格式化文本

.........

로그인 후 복사

.....

......

6、块引用:

.......

7、闪烁

......

<!doctype html><html> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body><h1>中间</h1><div>大家愚人节快乐</div><div>大家愚人节快乐</div><div>大家愚人节快乐</div><blink>块引用</blink><div>Her Song:<blockquote>When I was young, I listened to the radio waiting for my favorite songs....</blockquote></div><h1 id="定制列表元素">定制列表元素</h1><ul><li type=disc>ONE<li type=circle>TWO<li type=square>THREE</ul><h1 id="定制列表-h-dl-dt-Today-dd-Today-nbsp-is-nbsp-yesterday-dt-Tomorrow-dd-Tomorrow-nbsp-is-nbsp-today-dl-h-有序列表">定制列表</h1<dl><dt>Today<dd>Today is yesterday.<dt>Tomorrow<dd>Tomorrow is today.</dl><h1>有序列表</h1><ol><li>Today<li>Tommorow</ol><h1>无序列表</h1<ul><li>Today<li>Tommorow</ul> </body></html>

로그인 후 복사

4、图像

1、插入图像基本语法：

src对应图片的地址,alt图片的提示内容

2、图像和文字的对齐

HTML基础学习笔记_html/css_WEB-ITnose #=top,middle,bottom 分别为上、中、下

3、边框

HTML基础学习笔记_html/css_WEB-ITnose #=value

5、表格

1、基本语法：

...

- 定义表格
- 定义表行
- 定义表头
- 定义表元(表格的具体数据)

默认的不带边框，

带边框的表格：

2、跨多行，多列的表元

跨多列的表元

跨多行的表元

3、表格尺寸设置边框尺寸设置：

表格本身尺寸设置：

表元间隙设置:

表元内部空白设置:

4、表格内文字的对齐和布局

#=left, center, right

5、表格在页面的对齐

#=left right center

6、表格标题

7、表格色彩

....

<!doctype html><html> <head>  <meta charset="UTF-8">  <title>HTML</title> </head> <body>  <table border>   <caption >标题</caption>  <tr>      <th bgcolor=ffaa00>HTML</th>  <th bgcolor=#3300cc>MySql</th>  <th rowspan=2 >Css</th>  </tr>  <tr bgcolor=#ffffff><td>A</td><td>B</td>    </tr>  </table> </body></html>

로그인 후 복사

8、表格中分隔线的显示

显示所有的分隔线：

只显示组与组之间的分隔线：

只显示行与行之间的分隔线：

只显示列与列之间的分隔线 :

不显示任何分隔线:

6、表单

1、基本语法

(提交方法一般都是POST或者GET)

（enctype=”multipart/form-data”提交文件）

.........

一般的数据提交方式都是通过表单来完成的

下面试表单中提供给用户的输入形式

文字输入：*=text

密码输入：*=passwd

复选框：*=checkbox （默认选中 checked="checked'）

单选框：*=redio

图像坐标：*=image

隐藏表单元素：*=hidden

文件：type=file

列表选择框:

文本区域：

7、移动的文字

1、基本语法

.....

2、文字移动的属性设置

..... #=left,right（移动的方向，向右，向左）

3、方式：

.....

#=scroll（一圈一圈绕着走）

#=slide（只走一次）

#=alternate (来回走)

4、循环

..... #=次数

5、速度

..... #=速度

6、延时

..... #=时间

8、多媒体内容

본 웹사이트의 성명

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7667

Cakephp 튜토리얼

1393

C# 튜토리얼

1205

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.