HTML 학습 여정을 공유하세요
- 零下一度원래의
- 2017-06-24 13:23:222415검색
웹사이트 프로세스 개발
스타일 및 기능(포럼, 게시판, 결제, 사용자 로그인 등)을 결정합니다.
아티스트는 웹 페이지 렌더링(홈 페이지, 목록 페이지, 콘텐츠 페이지)을 제작합니다.
제작진이 사진을 잘라서 웹페이지 형식으로 레이아웃을 해놨습니다.
백그라운드 프로그램이 프로그램 작성을 시작합니다.
프런트 데스크와 백 데스크를 통합합니다.
HTML 댓글
참고: 댓글은 향후 유지 관리를 위한 것입니다.
총알의 일반적인 속성
<ul><li>内容</li> <li>内容</li> <li>内容</li></ul>
- 또는
-
l 유형: 총알 유형, 값: 디스크(작은 검은 점), 원(원), 사각형(단색 사각형)
HTML 숫자 목록(순서)
<ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>
의 공통 속성 유형: 숫자 유형, 값: 1 , a, A, 나, 나
시작: 숫자부터 번호 매기기
스크롤 자막 표시(삭제되었습니다)
<marquee> 内容….. </marquee>
공통 속성
방향: 스크롤 방향, 값: 위, 아래, 왼쪽, 오른쪽
너비: 스크롤 너비
-
높이: 스크롤 높이
BgColor: 스크롤 배경색
ScrollAmount: 스크롤 단계 값
ScrollDelay: 두 단계 사이의 값 유지
Loop: 루프 스크롤 횟수
사진 태그
구문 형식:
attribute = " value" >
공통 속성:
너비: 이미지 너비.
높이: 이미지 높이.
테두리: 사진의 테두리입니다.
Src: 이미지의 경로입니다.
정렬: 왼쪽, 가운데, 오른쪽. (그래픽과 텍스트가 혼합된 효과를 얻을 수 있음)
Hspace: 그림과 텍스트 사이의 왼쪽 및 오른쪽 간격.
Vspace: 그림과 텍스트 사이의 상단 및 하단 간격.
Hyperlink
문법 형식: attribute="value">content
공통 속성:
Href： 대상 파일 주소 URL.
대상 : 공개방식. _blank: 새 창, _self: 이 창, _parent: 이전 창이 열립니다. top: 최상위 창이 열립니다.
이름: 드로잉 포인트의 이름을 정의합니다.
mailto
#빈링크.
Html 색상 표현
세 가지 방법:
색상 단어: 파란색, 녹색, 빨간색, 노란색.
10진수 표현: rgb(255, 0, 0)
16진수 표현 #FF0000(빨간색), #00FF00(녹색), #0000FF(파란색)
앵커 링크
기준점으로 이동(표시):
문법:콘텐츠…..
태그
역할: 웹 페이지의 메타 정보를 제공합니다. 웹페이지에 대한 검색 키워드를 지정합니다.
태그에는 http-equiv 및 name
1이라는 두 가지 속성이 있습니다. http-equiv 속성
기능: http 프로토콜 파일 헤더 정보를 시뮬레이션하고 브라우저에 웹 페이지를 여는 방법을 알려줍니다.
http-equiv 속성은 일반적으로 content 속성과 함께 사용됩니다. 콘텐츠 속성은 정보의 세부 속성을 지정합니다
웹 페이지의 문자 집합을 설정합니다:
웹페이지 자동 새로고침:;
2 이름 속성
은 웹 페이지의 검색 키워드, 저작권 정보, 작성자 등을 설정합니다.
（1） 设置网页搜索关键词
（2） 设置网页描述信息
Xhtml规范
l 所有标记和属性全部小写
l 单边标记必须关闭。如：
-----l 所有的属性值都必须加引号。
l 所有属性都必须有值。如：
---l 标机之间要顺序嵌套，外层套内层。
l Xhtml网页必须有DTD文档类型定义代码
DTD文档类型定义
三大类型：
表格标签
（1）结构：(一行四列)
<table border=“1”> <tr><td> </td><td> </td><td> </td><td>< /td> </tr></table>
（2）border属性：
Width：宽度
Height：高度
Border：边框
Bordercolor：边框颜色
Bgcolor：表格背景色
Background：背景图片
Cellpadding：单元格与内容距离
Cellspacing：单元格与单元格距离
Rules：合并边框线，取值：all
（3） tr属性：
bgcolor
align
height：水平：left、center、right
valign：垂直：top、middle、bpttom
（4） td属性：
colspan：合并单元格（左右）
rowspan：合并单元格（上下）
background
width
height
bgcolor
align
valign
表单
（1）结构：
<form name=”form1” method=“get” action=“login.php”> 用户名：<input type=”text” name=”username”/> 密码：<input type=”password” name=”userpwd”/> <input type=”submit” value=”提交表单”/></form>
（2）标记属性----块元素
name
method:提交方式 get、post
action：指定表单的处理程序，一般是PHP文件
enctype：指定表单数据的编码方式。只能在method=post情况下。
application/x-www-form-urldecoded //默认加密方式
multipart/form-data //上传文件，值是他自己
（3）get和post方法
Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全
如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。
POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。
单行文本域
语法格式：属性=“值”>
属性：
name：文本框的名字
Type：表单元素类型
Value：文本框的值
Size：文本框的长度
Maxlength：最多可以输入多少个字符。
Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
Disabled：禁用属性 同上。
单行密码域
语法格式：
属性：
name：文本框的名字
Type：表单元素类型
Value：文本框的值
Size：文本框的长度
Maxlength：最多可以输入多少个字符。
Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
Disabled：禁用属性 同上。
单选按钮
语法格式:男
女
属性：
name：元素名称
Checked：默认选择checked=“checked”
Value：值
复选框
语法格式： 游戏
杀人
放火
属性：
name：元素名称
Checked：默认选择checked=“checked”
Value：值
下拉列表
语法格式：
<select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>
：只有一个name属性。 ：两个属性value、selected Selected：默认选中
层叠样式表方式改下拉列表宽度：type=”width:100px”
文本区域
语法格式：
属性：
name：元素名称
Cols：宽度
Rows：高度
各种按钮
提交按钮
重置按钮
图片按钮
普通按钮
普通按钮本身不具备任何功能，需与js配合使用。
上传文件域
语法格式：
属性：
Name：名称
Value：上传文件名。Value属性是只读属性，
必须与
隐藏域
功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。
语法格式：
表格标题 语法格式：
是 的子标记。
放在 的后面。
网页多媒体
网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。
图片热点
图片热点：给一张图片加多个热点。
语法结构：
<ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /><area shap=”热区形状” cords=”热区坐标” href=”链接地址” /></map>
标记常用属性：
Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）
Coords：热区的坐标
如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”
（x1,y1）为左上角坐标，（x2，y2）为右下角坐标。
如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。
普通框架
框架集和框架页：
框架集：
:主要用来划分窗口。框架页：:主要用来指定默认显示的网页地址。
属性：
Cols:划分左右型框架。
Cols=”200,*” 左边为宽度200px，剩下的为右边。
Cols=”180,*,180” 左右框架为180px，剩下的为中间框架
Rows：划分上下型框架
Rows=”200,*” 上框架高度为200px，剩下的为下框架。
Frameborder：是否显示边框线，取值0或1.
Border：边框粗细。
Bordercolor：边框颜色。
框架页的属性 ：
Src：该小窗口中，默认显示的网页地址。
Noresize：不能调整大小。Noresize=”noresize”
Scrolling:是否显示滚动条，取值：auto、yes、no
Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。
</strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容 内嵌框架（行内框架）
与普通框架区别：
常用属性：
Src：引入文件地址。
Width：宽度
Height：高度
Frameborder：是否显示框架的边框线，取值：yes或no。
Scrolling：是否显示滚动条。取值：yes、no、auto。
Name：制定小窗口的名称，改名称也是给标记的target属性来用。
Align：框架在网页中对齐方式，取值：left、center、right。
CSS简介
CSS 层叠样式表。
CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。
语法格式：
<style type=”text/css”> h1{Color:red; //文本颜色 Text-align:center; //对齐方式 Border:1px solid #444; //半框样式 Background-color:#ffff00; //背景色}</style>CSS选择器
基本选择器
(1) “*”选择器：通配符
描述：将匹配所有的html标记，所有标记都会改变。
语法：*{color：red；}
（2）标签选择器
描述：将匹配指定的html标记
语法：h1{color：red；}
（3）class选择器（类选择器）-----使用最多的选择器
描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
格式：
(3) 하위 요소 선택기
설명: 요소의 하위 요소에 스타일을 추가합니다
CSS 크기 속성
너비: 요소 너비. px 단위를 추가해야 합니다.
높이: 요소 높이.
CSS 글꼴 속성
글꼴 크기: 텍스트 크기. 예: 글꼴 크기: 14px
글꼴 계열: 글꼴. 예: 글꼴 계열: Microsoft Yahei
글꼴 스타일: 기울임꼴, 값: 기울임꼴. 예: 글꼴 스타일: 기울임꼴
글꼴 두께: 굵게, 값: 굵게. 예: 글꼴 두께:
CSS 텍스트 속성
색상: 텍스트 색상
텍스트 장식: 텍스트 장식 줄, 값: 없음(없음), 밑줄(밑줄), 윗줄( Overline), line-through(취소선)
텍스트 정렬: 텍스트 가로 정렬, 값: 왼쪽, 가운데, 오른쪽
줄 높이: 줄 높이, 다음과 같이 고정 값 또는 백분율일 수 있습니다. 줄 높이: 24px; 줄 높이: 150%
텍스트 들여쓰기: 첫 번째 줄 들여쓰기. 텍스트 들여쓰기: 28px;
문자 간격: 단어 간격.
의사 클래스 선택기
하이퍼링크에는 네 가지 상태가 있습니다
일반 상태(:링크): 마우스를 놓지 않았을 때의 이전 링크 스타일.
상태 넣기(:hover): 링크 위에 마우스를 올렸을 때의 스타일입니다.
활성화 상태(:action): 마우스 왼쪽 버튼을 놓지 않고 누르고 있습니다.
방문상태(:방문) : 마우스 왼쪽 버튼을 누르고 팝업하면, 이때의 스타일입니다.
일상 작업에서는 다음 작성 방법을 사용하여 링크에 스타일을 추가합니다.
A:link,a:visited{ color:#444;text-꾸밈:none } //Replace "normal; "상태"와 "방문 상태"가 하나로 통합됩니다.
A:hover{ color:#990000;text-꾸밈:underline; } //"마우스를 올려서" 단일 효과를 만듭니다
CSS 목록 속성
목록 스타일: 목록 스타일, 값: 없음. 글머리 기호나 숫자 앞의 다양한 기호를 제거합니다.
- 예:
- border-left: 5px 빨간색 점선
- 테두리 오른쪽: 오른쪽 테두리 선.
- 테두리-상단: 상단 테두리선.
- 테두리-하단: 하단 테두리선.
테두리: 네 변에 동시에 테두리 라인을 추가합니다.
- CSS 패딩 속성: 테두리선에서 내용까지 패딩
- 참고: 일반적으로 너비 및 높이 속성을 호출할 때 내부 및 외부 여백과 테두리선을 제외한 콘텐츠의 너비와 높이를 나타냅니다.
- Padding-왼쪽: 왼쪽 내부 패딩 거리, 오른쪽 줄에서 콘텐츠까지의 거리.
- Padding-right: 오른쪽 내부 패딩 거리. 위와 동일
- 축약형
- Padding:10px; //4면의 내부 패딩은 10px입니다.
- Padding: 10px 20px; //왼쪽과 오른쪽은 10px입니다. ;
-
Padding : 5px 10px 20px; //위쪽은 5px, 왼쪽과 오른쪽은 10px, 아래쪽은 20px; - Padding: 20px 10px 5px 20px; //순서는 위쪽, 오른쪽 , 하단, 왼쪽;
- CSS 여백 속성: 바깥쪽 가장자리 거리
- 여백-왼쪽: 왼쪽 선에서 바깥쪽까지의 거리
- 여백-오른쪽: 오른쪽...
- Margin-top: Top....
- 약어:
- Margin: 10px //외부 여백 4개는 각각 10px입니다.
- 여백: 10px 20px; //상하 여백은 10px, 좌우 여백은 20px입니다.
여백: 10px 20px 50px; //상단 여백은 10px, 좌우 여백은 20px, 하단 여백은 50px입니다.
여백: 10px 20px 30px 40px; //순서는 오른쪽 위, 왼쪽 아래입니다.
CSS 배경 속성
배경색: 배경색.
Background-image: 배경 이미지 주소입니다. 배경 이미지:url(image/banner.jpg)
위 내용은 HTML 학습 여정을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.