html基础_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html基础_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:05 PM

html베이스

一、HTML的基本标签
1、html文件的基本结构
a、HTML : Hypertext Markup Language 超文本标记语言

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title>网页标题</title> 6 </head> 7 <body> 8  主体  9 </body>10 </html>

b.基本结构:头部(head) 主体(body)

c.所有内容都在标签之内

内放的是头部信息，是对页面的描述，不会直接显示在页面中

内的中设置的是页面的标题，只能放在中

是页面的主体，大部分显示内容都定义在这里

 d.编辑工具：记事本、UltraEdit等,开发人员用VisualStudio写html就够了2.块级标签(基本的)  a.标题标签<h1>~<h6>  段落标签<p>   水平线标签<hr />  b.常用于页面布局的块级标签：有序列表<ol>  无序列表<ul>  定义列表<dl>  表格标签<table>  表单标签<form>  分区标签<div>3.行级标签  a.图像标签<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy"  / alt="html基础_html/css_WEB-ITnose" >   超链接标签<a>   范围标签<span>   换行标签<br />  输入框标签<input />   文本域标签<textarea>  b.常见的图片格式: JPG  GIF  BMP  PNG  C.语法:<img src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="图像的替代文字" title="鼠标悬停提示文字"/>

4.常使用如下四种块状结构：  a.Div-ul(ol)-li：用于分类导航或菜单等场合  b.Div-dl-dt-dd：用于图文混编场合  c.Table-tr-td：用于规整数据的显示  d.Form-table-tr-td：用于表单布局的场合5.XHTML1.0的基本规范：  a.标签名和属性名称必须小写  b.HTML标签必须关闭  c.属性值必须用引号括起来  d.标签必须正确嵌套  e.必须添加文档类型声明：

①该声明必须位于HTML文档的第一行

②有三种级别声明：Strict(严格类型) Transitional(过度类型) Frameset(框架类型)

二、HTML的基本标签(二)和表单

1.超链接: (target常用取值:_self(自身窗口)和_blank(新建窗口))

2.超链接的三类应用场合:

a.页面间链接 : A页到B页,用于网站导航

b.锚链接 : A页的甲位置到A页(本页)的乙位置或A页甲位置到B页的乙位置

1 <a href = "#star">[明星专区]</a>2 3 <!-- 链接到同一个网页的特定位置 -->4 <a name = "star"><img src="/static/imghwm/default1.png"  data-src="images/adv.jpg"  class="lazy" alt="明星专区"  title="明星专区">a>

c.功能性链接 : 在页面中调用其他程序功能

1 <!--例:电子邮箱链接,mailto:创建电子邮箱链接-->2 <a href="mailto:guimeiWebMater@gmgw.com">站长信箱</a>

3.HTML注释：

4.html中的特殊符号:

a.空格( ) 大于号(>) 小于号(<) 引呈(") 版权符号(©)

5.表单

a.语法格式:

1     <!--2         1.get  是指将用户填写的信息作为一个字符串连接到地址栏一起提交，连接符用"?"隔开3         2.post 是指将用户填写的信息作为一个数据包提交，数据包是经过编码的4         -->5     <form action="表单提交地址" method="提交方法(1.get  2.post)">6            <!--文本框.按钮等表单元素-->7     </form>

b.表单元素的基本格式:

1  <!--type可用的选项有:text\password\checkbox\radio\submit\reset\file\hidden\image\button-->2 <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中(单选或复选才用)" />

6.表单元素介绍

a.文本框(text)

1    <form action="" method="post">2         <p> 用户名:3             <input type="text" value="张三" size="20" name="userName" />4         </p>5     </form>

b.密码框(password)

1 密码:<input type="password"  name="pass" />

c.重置\提交与普通按钮

1         <input type="submit" value="提交按钮" name="submit" />2         <input type="reset" value="重置按钮" name="reset" />3         <input type="button" value="普通按钮" name="button" />4         <!--图形提交按钮-->5         <input type="image" src=" " />

d.单选按钮(radio)

1         <input type="radio" name="gen" class="input" value="男"/>男2         <input type="radio" name="gen" class="input" value="女"/>女

e.复选框(checkbox)

1     <input type="checkbox" name="hobby1" value="1" />运动2     <input type="checkbox" name="hobby2" value="2" />聊天3     <input type="checkbox" name="hobby3" value="3" />玩游戏

f.文件域(file)

1     <input type="file" name="file" />

g.下拉列表框(select)

1     <!--name:指定列表  value:可选择的值-->2     向往月份：3     <select name="c"> 4         <option value="0" selected="selected">请选择</option>5         <option value="1" >1月</option>6         <option value="2">2月</option>7     </select>

h.多行文本域(textarea)

1     <!--cols:指定多行文本域的列数   rows:指定多行文本域的行数-->2     <textarea name="textarea" cols="40" rows="6">初始文本内容</textarea>

i.隐藏域(hidden)

1     <!--隐藏用户ID信息333-->2     <input type="hidden" name="userid" value="333">

j.只读和禁用属性
只读:readonly="readonly" 禁用: disabled="disabled"

7.结合表单做的简易求职表

 1 <html> 2 <head> 3 <title>简单表单小结</title> 4 </head> 5 <body> 6 <div> 7 <form action="" method="post"> 8 <h3 id="申请表">申请表</h3> 9 <p>10 姓名：<input type="text" name="text" size="20"/> <br />11 密码：<input type="password" name="pass" size="21"/> <br />12 照片：<input type="file" name="files"/><br />13 感兴趣的职位：<br />14 <input type="radio" name="radio" class="input" value="1"/>Web设计15 <input type="radio" name="radio" class="input" value="2"/>Web开发 <br />16 喜欢的月份：<select name="c"> 17 <option value="0">请选择</option>18 <option value="1">1月</option>19 <option value="2">2月</option>20 <option value="3">3月</option>21 <option value="4">4月</option>22 <option value="5">5月</option>23 <option value="6">6月</option>24 <option value="7">7月</option>25 <option value="8">8月</option>26 <option value="9">9月</option>27 </select> <br />28 协议：<br />29 <textarea readonly="readonly" name="textarea" cols="20" rows="4">老鼠爱大米------</textarea> <br />30 <input type="checkbox" name="ckbox"/>我认真阅读并接受以上协议。<br />31 经验：<select name="ca"> 32 <option value="0">无经验</option>33 <option value="1">一年</option>34 <option value="2">三年</option>35 <option value="3">五年</option>36 </select> <br />37   <input disabled="disabled" type="submit" name="button" value=" 提交 "/>38     <input type="reset" name="reset" value=" 重置 "/>39 </p>40 </form>41 </div>42 </body>43 </html>

三.表格的应用和布局

1.表格的基本语法

1     <table>2         <tr>3             <td>第一行第一个单元格的内容</td>4         </tr>5         <tr>6             <td>第二行第一个单元格的内容</td>7         </tr>8     </table>

2.跨行跨列

 1     <!-- 2         合并单元格 1.合并列  colspan = 列数  3                    2.合并行  rowspan = 行数 4             注：只能用在<td>和<th>中 5         --> 6     <table border="1" whdth="100" height = "100"> 7         <tr> 8             <td rowspan="3">合并第一列的一行和二行</td> 9             <td colspan="2">合并第一行的二列和三列</td>10         </tr>11         <tr>12             <td>第二行第一个单元格的内容</td>13             <td>第二行第二个</td>14         </tr>15     </table>

3.表格的高级标签

a.表格标题:

b.表格表头:

c.表格数据的分组标签:页眉

数据主体页脚

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

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

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

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

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

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

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

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

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

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

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는