HTML介绍

 1 HTML简介

1.1HTML简介

HTML :超文本标记语言(HTML HyperText Markup Language )。

HTML文档是一个放置了标记(tags)的.html文件(.htm)。是一种客户端浏览器解释的语言,不用经过编译。

HTML语言是通过各种标记来标识文档的结构,以及标识超链接、图片、文字、段落、表单等信息。

1.2 前端开发工具

  • VSCode
    Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……
  • Sublime
    此编辑器同时支持Windows、Linux、Mac OS X等操作系统。他的运行界面十分整洁美观、文本功能也是很强大,运行速度超快,非常适合编写代码,写文章做笔记。它还支持众多插件扩展,实现强强联手,比如说:Emmet插件、JsFormat、SideBarEnhancements、TrailingSpaces、Tag等。
  • WebStorm
    这款JavaScript开发工具,相信作为JS开发者的你一定知道,它可是被称作"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE",功能主要包括:JavaScript,编辑语言,创造便捷的环境等,相信你一定烂熟于心了,在这里就不一一赘述了
  • HBuilder
    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

2.HTML语法

2.1HTML文档基本结构

2.2 HEAD部分的HTML标签

1.标题标签

<title>我的第一个html文件</title>

2.meta标签:设置字符集为utf-8

<meta charset="utf-8" />

2.3 BODY部分HTML标签

1.标题标签(块级标签:独占一行)

<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

2.段落标签(块级标签:独占一行)

<p>这是一个段落标签</p>

3.换行标签

<p>这是一个段落标签。<br>这个段落的内容是:如何更好的学习html</p>

4.图片标签(内联标签,部独占一行)(单标签)

<!--
图片标签属性:
src:图片地址
alt:图片的替代文字
title:鼠标悬停提示文字
-->
<img src="img/qiu.jpg" alt="秋天的景色" title="秋天的景色">

5.超链接标签(内联标签:部独占一行)

<!--
超链接标签属性:
href:跳转路径
-->
<a href="http://www.baidu.com">跳转到百度</a>

6.列表标签(无序列表与有序列表)

1)无序列表

<ul>
    <li>HTML语言</li>
    <li>CSS样式表</li>
    <li>javaScript语言</li>
</ul>

2)有序列表

<ol>
    <li>HTML语言</li>
    <li>CSS样式表</li>
    <li>javaScript语言</li>
</ol>

3)定义列表

<!--
    dl:声明定义列表
    dt:声明列表项
    dd:定义列表项内容
-->
<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言,控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表,控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言,控制网页的行为</dd>
</dl>

7.表格标签(用于显示表数据,基本结构如下)

<!--
    表格标签:
    table:整个表格的最外层标签
    tr:行标签
    th:表格标题标签
    td:列标签,一个td,就是一个单元格
    表格标签属性:
    border:边框宽度
-->
<table border="1">
    <tr>
        <th>第一列</th>
        <th>第二列</th>
    </tr>
    <tr>
        <td>这是第一行第一列</td>
        <td>这是第一行第二列</td>
    </tr>
    <tr>
        <td>这是第二行第一列</td>
        <td>这是第二行第二列</td>
    </tr>
</table>

2)表格合并:表格合并中两个重要属性:

.colspan:合并列

.rowspan:合并行

<table border="1">
    <tr>
        <td colspan="2">这是第一行第一列</td>
        <td>这是第一行第三列</td>
    </tr>
    <tr>
        <td rowspan="2">这是第二行第一列</td>
        <td>这是第二行第二列</td>
        <td>这是第二行第三列</td>
    </tr>
    <tr>
        <td>这是第三行第二列</td>
        <td>这是第三行第三列</td>
    </tr>
</table>

8.from表单

<!-- 
    form是表单最外层标签。
    action属性:提交服务器地址
    method属性:提交方式:get、post
-->
<form action="XXXX" method="get">
    … … …
</form>

9.表单常用控件

1).文本框

<!-- placeholder属性为HTML5新增属性:提供可描述输入字段预期值的提示信息 -->
<input type="text" placeholder="用户名" value="zhangsan" />

2).密码框

<input type="password"/>

3).单选按钮

<input type="radio" name="sex" value="0" checked="true"/>男
<input type="radio" name="sex" value="1"/>女

4).复选框

<input type="checkbox" name="like" value="0" checked=" true" />读书
<input type="checkbox" name="like" value="1" />体育
<input type="checkbox" name="like" value="2" />游戏

5).下拉列表

<select name="nationality">
    <option value="0" selected="true">中国</option>
    <option value="1">美国</option>
    <option value="2">英国</option>
</select>

6).文件域

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

7).文本域

<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>

8).提交按钮

<!-- 将表单全部内容,提交给action属性指定的服务器。一个表单都应该有一个提交按钮。-->
<input type="submit" value="提交" />

9).重置按钮

<input type="reset" value="重置" />

10).普通按钮

<input type="button" value="点击我">
<button>点击我</button>

10.容器标签div与span

1)div标签:块级标签,可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。

<div>
    <h1>html语言</h1>
    <p>html语言是超文本标记语言</p>
</div>

2)span标签:内联标签,可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

<p>今天气温<span>40</span>度</p>

2.4 HTML5新增标签

注意:有些元素是为移动端浏览器设计的,所以有些效果只有在移动端浏览器中才能有效。

2.5 新增语义化结构标签

3.总结

1)表单实例

2)html,css,js的

html负责网页的结构和内容,css负责网页的布局,js负责网页的行为和交互,三者共同协作构建出一个完整的网页

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值