제품 관리자가 프로젝트 요구 사항 제안
UI 디자인 초안
프런트엔드 직원은 정적 페이지 개발을 담당합니다(동기화되는 백엔드 직원). 프론트엔드가 데이터를 준비 중입니다)
프런트 백엔드 상호작용
Testing
온라인 제품(프로젝트 후 유지 관리)
사용자가 브라우저에서 해당 서버로 전송되어 URL을 요청합니다. 해당 웹페이지 정보
서버는 URL에 해당하는 웹 리소스를 컴퓨터의 임시 폴더에 다운로드합니다
임시 폴더에 있는 리소스 폴더는 브라우저를 통해 표시됩니다. (따라서 두 번째로 웹사이트를 요청할 때 속도가 훨씬 빨라집니다.)
인라인 요소: 한 행에 n개의 여러 인라인 요소가 있으며 너비는 인라인 요소의 높이는 설정할 수 없습니다
블록 요소: 블록 요소 단독으로 한 줄을 차지합니다.
인라인 블록 요소: 한 줄에 여러 개의 인라인 블록 요소가 있을 수 있지만 너비와 높이는 set
!DOCTYPE.. 문서 선언 헤더(html5, html4.01, XHTML)
html4.01 및
head
meta(문자 집합: UTF-8, GB2312)
<meta name="keywords" content="키워드, 키워드"/ >(위 두 메타는 SEO 최적화를 위한 것입니다)<title>페이지 제목</title>
meta（charset:UTF-8,GB2312）
<meta name="description" content="要描述的内容"/>
<meta name="keywords" content="关键字，关键词"/>
(以上两个meta都是为了SEO优化)
<title>页面的标题</title>
body
标题<h1></h1><h2></h2>
段落 p:虽然p是块元素，但是他里面放的也是图片，文字；
span:里面用来放文本：图片，文字；
a链接<a href="要跳往的地址">
图片<img src="相对地址/绝对地址"body
<h1></h1><h2></h2><img src="상대 주소/절대 주소"🎜🎜🎜🎜🎜🎜🎜css: 🎜🎜🎜로 작성내부 스타일의 기본 구문
:
선택기(div) {
key: value
}
p{
height:40px;
line-height:40px;
background-color:red;
}선택기:
태그 선택기: div, h, p, a , img,span
클래스 선택기: .xinxi
(클래스 이름으로 한자와 숫자로 시작하지 마세요. 반드시 영어를 사용하세요.)
html 라벨 중첩만 고려됩니다. , 탭과 공백에 관계없이 수많은 공백은 하나로만 계산됩니다.
이미지 태그 <img src="relative path/absolute path"/> <img src="相对路径/绝对路径"/>
相对路径：以当前页面为出发点查找的；(./ 或 不写,找到父级../)
绝对路径：都是以http开头的；例如：
图片标签上有两个常用属性，src属性：引入图片地址; alt标签：图片无法正常加载时，用来替代的文字；(alt也可以省略)
a链接常用的属性
href:'要跳往的地址',href的作用
可以填写绝对路径，跳到直到的网页
可以写#：1）不确定地址的时候 2)简单的回到顶部效果
利用锚点进行页面切换
title:鼠标以上时的提示
target:打开方式(默认的_self当前页面打开; _blank新页面打开)
这些属性中，title和target都可以省略；
a链接的锚点使用
本页面各个模块之间的相互跳转<div id="#div1"></div> <a href="#div1"></a>
2 实现不同页面之间，不同模块的相互跳转<a href="detail.html#detail1"></a>
无序列表:无序列表中的li也是容器；
<ul> <li></li> <li></li> </ul>
有序列表
<ol> <li></li> <li></li> </ol>
定义列表：dl,dt,dd都是容器
<dl> <dt>表头</dt> <dd>详情介绍</dd> </dl>
表单用
输入文本框 <input type="text" placeholder="默认提示"/>
输入密码 <input type="password" placeholder="默认提示"/>
单选按钮：单选按钮组，一定要加上name，否则无法实现单选效果；
<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女
多选框 <input type="checkbox" checked/>
下拉单
<select> <option name="city" value="bj">北京</option> <option name="city" value="sh">上海</option> <option name="city" value="sz">深圳</option> <select>
name和value主要用于前端向后台提交数据；
id：
设置样式(不建议)
在JS阶段，用来获取元素
id配合a链接，进行锚点设置；
留言框：<textarea name="" value="" cols="" rows=""></textarea>
普通按钮 type=button
提交按钮 type=submit
重置按钮 type=reset
标签选择器：div h1~h6 p span a img ul li ol dl dt dd input select
到官网上去取图片（以京东为例）：
把以上图片另存为，存到电脑中
注意：把icon图标放到文件夹的"根目录"；
在html页面中加入：<link rel="icon" href="favicon2.ico" type="image/x-icon"／>
<div id=" #div1"></div> <a href="#div1"></a>🎜2 서로 다른 페이지와 서로 다른 모듈 간의 상호 점프 실현 🎜< a href="detail.html#detail1"></a>🎜🎜🎜🎜list🎜🎜🎜🎜순서 없는 목록의 li도 컨테이너입니다. rrreee🎜🎜🎜ordered List🎜rrreee🎜🎜🎜정의 목록: dl, dt, dd는 모두 컨테이너입니다🎜rrreee🎜🎜🎜Form🎜🎜🎜🎜Form use🎜🎜🎜🎜입력 텍스트 상자 <input type=" text" placeholder=" 기본 프롬프트"/>🎜🎜🎜🎜비밀번호 입력 <input type="password" placeholder="기본 프롬프트"/>🎜🎜🎜🎜Radio 버튼: 라디오 버튼 그룹에 이름을 추가해야 합니다. 그렇지 않으면 라디오 선택 효과를 얻을 수 없습니다. 🎜rrreee🎜🎜🎜다중 선택 상자<input type="checkbox" selected/>🎜🎜 🎜🎜드롭다운 목록🎜 rrreee🎜🎜🎜이름과 값은 주로 프런트 엔드에서 백엔드에 데이터를 제출하는 데 사용됩니다. 🎜🎜🎜🎜id: 🎜🎜🎜🎜🎜🎜스타일 설정(권장되지 않음) 🎜🎜🎜 🎜JS 단계에서 요소를 가져오는 데 사용됩니다. 🎜🎜🎜🎜 ID는 앵커 포인트를 설정하는 링크와 일치합니다. 🎜🎜🎜🎜🎜🎜메시지 상자: <textarea name="" value="" cols= ""row=""></textarea> Code> 🎜🎜🎜🎜 버튼> 일반 버튼 유형 = 버튼🎜🎜🎜🎜 제출 버튼 유형 = 제출🎜🎜🎜🎜 재설정 버튼 유형 = 재설정 🎜🎜🎜🎜 태그 선택기: DIV h1~h6 pspan a img ul li ol dl dt dd input select🎜🎜🎜🎜 작은 아이콘을 추가하는 단계: 🎜🎜🎜🎜 사진을 얻으려면 공식 웹사이트로 이동하세요(JD.com을 예): 🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜위 이미지를 컴퓨터에 저장하세요🎜🎜🎜🎜참고: 아이콘을 폴더의 "루트 디렉터리"에 넣으세요.🎜🎜🎜🎜html 페이지에 추가하세요. : <code><link rel= "icon" href="favicon2.ico" type="image/x-icon"/>🎜🎜🎜위 내용은 HTML+CSS 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
