Web 基础 1 HTML入门

1.1HTML的简述

1.1.1HTML是什么

HTML：（Hyper Text Markup Language）超文本标记语言
文本：相当于记事本里写的文字。展示信息
超文本：超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字
语言：工具。
标记：标签

1.1.2HTML的作用

HTML是由标签所组成的语言，能展示超文本效果
HTML是用来写网页的，是设计页面的基础。

1.1.3HTML的语言特性

HTML代码是由头和体组成

<html>
    <head>
    <title> 标题</title>
</head>
    <body>需要展示给用户看的信息内容</body>
</html>

<html>标签就相当于 java类 大括号
<head>中存放的都是网页的说明性内容，例如标题

HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行。
HTML标签通常由开始标签和结束标签组成。例如:<font>内容体</font>
开始标签和结束标签之间的内容叫做内容体
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：
自关闭
HTML标签不区分大小写，为了方便阅读，建议使用小写。
HTML标签是有属性的，格式为：属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号
HTML标签建议包裹嵌套，不建议交叉嵌套。如下图所示

语言特性图解.png

1.1.4 编译器的选择

选择使用Hbuilder
自己百度入门教程（炒鸡简单）

1.2 HTML的基本标签

1.2.1字体标签和格式化标签

<font>
字体标签，用于展示效果中修饰文字样式
- <font 属性名=”属性值”>文字</font>
- size:控制字体大小.最小1 ~ 最大7。如果设置范围不在1~7之间，设置无效
- color：控制字体颜色. 使用英文设置（例如：red,blue…）
- face：控制字体类型。只能设置系统字库中存在的字体类型
代码及其结果

<body>
    今天天气<font color="red" size="4" face="楷体">好晴朗</font>
</body>

font.png

- HTML源码中换行，浏览器解析时会自动忽略。
- 换行标签，用于展示效果中换行
代码及其结果

<body>
        窗前明月光
        窗前明月光
        <br />
        窗前明月光
</body>

br.png

<p></p>
- 段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
- align:段落内容的对齐方式
  默认是left，内容居左
  Right 右
  Center 居中
代码及其结果

<body>
        窗前明月光
        <p>疑是地上霜</p>
        <p align="right">举头望明月</p>
        <p align="center">低头思故乡</p>
</body>

p.png

<h1></h1>
- 标题标签，用于展示效果中划分标题
- 其中<h1>最大，<h6>最小
代码及其结果

<body>
    <h1>李白和杜甫是一个时代的</h1>
    <h2>李白和杜甫是一个时代的</h2>
    <h3>李白和杜甫是一个时代的</h3>
    <h4>李白和杜甫是一个时代的</h4>
    <h5>李白和杜甫是一个时代的</h5>
    <h6>李白和杜甫是一个时代的</h6>
</body>

h1.png

 
- HTML源码中的多个空格，效果中最终会合并成一个。
  空格符号，用于展示效果中显示一个空白的位置
代码及其结果

<body>
        李      白
        <br />
        李&nbsp;&nbsp;&nbsp;白
</body>

nbsp.png

HTML注释
- 用于注释HTML源码，不在HTML效果中展示。
  只能在源码中看到，页面展示效果中是没有
- 格式：

1.2.2 图片标签

<img/>
用于在页面效果中展示一张图片。
- src：指明图片的路径。（必有属性）
- 图片路径的写法：
  - 内网路径：
    - 绝对路径：文件在硬盘上的具体位置。【不建议使用】
      例如：C:\ JavaWeb001_html\img\c_1.jpg
    - 相对路径：从引入者所在目录出发。【建议使用相对路径】
      例如：../img/c_1.jpg
      ../表示上一层目录
      ./表示当前目录
  - 互联网路径：
    必须前面加上http://
    例如：http://www.baidu.com/xxx.jpg
- width：图片宽度
- height：图片的高度
  - 宽度和高度的设置：
  - 默认单位是px，像素。例如：width=”400” 其实设置的是 width=”400px”。固定设置方式
  - 百分比设置。例如：width=”50%”。是父标签的百分比。动态改变的。
代码及其结果

<body>
        <img src="img/龙王的工作.jpg" />
        <img src="img/龙王的工作.jpg" width="50%"/>
</body>
属性自己试 不想对萝莉下手

imag.png

列表标签
- 无序列表标签，用于在效果中定义一个无序列表
- <ul></ul>
- 列表条目项标签，用于在效果中定义一个列表的条目
- <li></li>
- 有序列表标签，用于在效果中定义一个有序列表
- <ol></ol>
  - 其中 type 属性可以改变列表符号
  - start 可以选择开始序号
代码及其结果

<body>
    <ul type="square"> 
        <li>五花牛肉</li>
        <li>小炒肉</li>
        <li>梅花肉</li>        
    </ul>
    
    <ol type="a">
        <li>五花牛肉</li>
        <li>小炒肉</li>
        <li>梅花肉</li>    
    </ol>
</body>

ulol.png

1.2.3 超链接标签

<a></a>
- 超链接标签，用于在效果中定义一个可以点击跳转的链接
- href：超链接跳转的路径 (必有属性)
- 内网本机路径：相对路径和绝对路径
- 互联网路径：http://地址
  本页：默认跳转到本页
- 超链接正常工作：
  - a标签中必须有内容
  - a标签必须有href属性
代码及其结果

<body>
    <a href="http://www.baidu.com">baidu</a>
    <a href="http://www.jianshu.com">简书</a>
</body>

a.png

注意：
- a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
- a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

1.2.4 表格标签

<table></table>
- 表格标签，用于在效果中定义一个表格
- border：设置表格的边框粗细
- width：设置表格的宽度
<tr></tr>
- 表格的行标签，用于在效果中定义一个表格行
<td></td>
- 表格的单元格标签，用于在效果中定义一个表格行中的单元格
表格书写顺序

表的入门书写顺序.png

- 定义一个表格 <table></table>
- 定义表格中的一行  <tr></tr>
- 在表格一行中定义单元格 <td></td>   内容就可以写在单元格中

代码及其结果

<body>
    <table border="1" align="center">
        <tr>
            <td>姓名</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>100</td>
            <td>98</td>
            <td>68</td>
        </tr>
        <tr>
            <td>小话</td>
            <td>13</td>
            <td>94</td>
            <td>62</td>
        </tr>
    </table>
</body>

table.png

<th></th>
- 表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
- <th>和<td>唯一区别：<th>内容居中加粗
单元格合并

<td>或者<th>都有两个单元格合并属性：

colspan：跨列合并单元格
rowspan：跨行合并单元格

合并步骤：
- 确定合并哪几个单元格，确定是跨列合并还是跨行合并
  在第一个出现的单元格上书写合并单元格属性
  合并几个单元格，属性值就书写几
  被合并的单元格必须删掉
- 熟练以后可以只用这样写
- 这不做演示了你们自己做我已经习惯直接写了！！！！

<table width="100%" border="1" align="center">
        <tr align="center" >
            <td rowspan="2" >
                <img src="img/big01.jpg"/ width="100%">
            </td>
            <td colspan="3">
                <img src="img/middle01.jpg" width="100%"/>
            </td>
            <td align="center">
                <img src="img/small03.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small03.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src="img/small03.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
            <td align="center">
                <img src="img/small02.jpg">
                <br />
                <a href="index.html">蒸锅</a>
                <br />
                ￥299
            </td>
        </tr>
    </table>

合并.png

1.2.5 块标签

<span></span>
- 行级的块标签，用于在效果中一行上定义一个块，进行内容显示。
- span有多少内容，就会占用多大空间。
- Span不会自动换行适用于少量数据展示
代码及其结果

<body>
        <span>我是小熊1111111111111</span>
        <span>我是小熊2222222222222</span>
</body>

span.png

<div></div>
- 块级的块标签，用于在效果中定义一块，默认占满一行，进行内容的显示
- 默认占满一行
- 会自动换行
- 适用于大量数据展示
代码及其结果


<body>
        <div>我是小熊1111111111111</div>
        <div>我是小熊2222222222222</div>
</body>

div.png

Div和span的应用场景图解

divspan应用场景.png

1.2.6 框架标签

框架标签：<frameset>
- <frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定页面的位置。
- <frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。
  - <frameset>和<body>两个不能共存。
  - rows属性和cols属性取值：值1,值2,值3,….. 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。
框架子标签：<frame>
- <frame>标签，用于设置<frameset>框架集中的一个页面（框架）。
  - src属性：确定页面的路径
  - noresize属性：框架分隔先不能移动
  - target属性：确定需要显示的页面在何处显示
代码及其结果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="15%,85%">
        <frame src="top.html" noresize="noresize"/>
        <frameset cols="20%,*">
            <frame src="left.html" />
            <frame src="right.html" />
            
        </frameset>
        
    </frameset>
</html>

frameset.png

1.3表单标签详解

1.3.1输入项标签

<input/>标签
- type:设置该标签的种类
  - text:文本框。默认
  - password:密码框。内容为非明文
  - radio:单选框。在同一组内有单选效果
  - checkbox:复选框。在同一组内有复选效果
  - submit:提交按钮。用于控制表单提交数据
  - reset:重置按钮。用于将表单输入项恢复到默认状态
  - file:附件框。用于文件上传。
  - hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据。
  - button:普通按钮。需要和JS事件一起用
- name: 单选框、复选框进行数据的分组。
  - 设置该标签对应的参数名
    某个表单输入项需要通过参数列表提交，就必须设置name属性
- value:设置该标签对应的参数值。
  - 作为按钮的名字
  - value属性的设置策略：
    - 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
    - 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
- checked:设置单选框/复选框的默认选中状态
- readonly:设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交
- disabled:设置该标签不可用，参数值无法更改，且参数值也无法提交

1.3.2 选择标签

<select></select>标签定义一个选择框
- name: 设置该标签对应的参数名
- multiple：设置该标签选项全部显示，并且可以进行多选提交。默认为单选。
<option></option>标签
- 选项标签，用于为一个选择框添加一个选项
- alue:设置需要提交的参数值。
- selected:设置选项的默认选中状态
- 注意事项：
  - Option的内容体一般是用来进行展示
  - 参数值应该是option的value属性值

1.3.3文本域标签

<textarea></textarea>标签
表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入。
- name: 设置该标签对应的参数名
文本域和文本框区别：
- 文本框不能换行，文本域可以
- 文本框参数值是value属性，文本域参数值是标签的内容体

1.3.4表单标签

<form></form>标签。
- 用于在效果中定义一个表单，用于提交用户填写的数据。
action:将数据提交到何处。
- 默认提交到本页。
- 本机内网路径：
  - 相对路径：
  - 绝对路径：
- 互联网路径：
  - http://www.baidu.com/xxx
method:将数据以何种方式提交
- 默认为：get
- 提交方式可定义：get 或者 post
- Get提交方式特点：把数据拼接到地址栏上
- Post提交方式特点：没有把提交数据拼接到地址栏上。请求体
- Get和post提交方式区别：
- get提交的参数列表拼接到了地址栏后面
- post方式不会拼接地址栏
  - get方式提交的数据敏感信息不安全
    Post方式提交的数据相对安全
  - get方式提交的数据量有限的
    Post方式从理论上提交的数据量无限大
- 尽量使用post方式提交表单

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <form action="Demo2.html" method="get">
            用户名:
            <input type="text" name="name" value="请输入名字" />
            <br />
            密码:
            <input type="password" name="password" />
            <br />
            <input type="radio" name="gender" / value="男" checked="checked">男
            <input type="radio" name="gender" / value="女">女
            <br />
            <input type="checkbox" name="222" value="篮球" />篮球
            <input type="checkbox" name="222" value="足球" checked="checked" />足球
            <input type="checkbox" name="222" value="乒乓球" />乒乓球
            <br /> 附件:
            <input type="file" />
            <br /> 隐藏域:
            <input type="hidden" />
            <br />
            <select name="location">
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="江苏">江苏</option>
            </select>
            <br /> 备注:
            <textarea name="备注" cols="30" rows="5">不支持富文本</textarea>
            <br />
            <input type="submit" />
            <input type="reset" />
            <input type="button" value="射击" />
        </form>
    </body>

</html>

集中事例.png

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,616评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,020评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,078评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,040评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,154评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,265评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,298评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,072评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,491评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,795评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,970评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,654评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,272评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,985评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,223评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,815评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,852评论 2赞 351

Web 基础 1 HTML入门

1.1HTML的简述

1.1.1HTML是什么

1.1.2HTML的作用

1.1.3HTML的语言特性

1.1.4 编译器的选择

1.2 HTML的基本标签

1.2.1字体标签和格式化标签

1.2.2 图片标签

1.2.3 超链接标签

1.2.4 表格标签

1.2.5 块标签

1.2.6 框架标签

1.3表单标签详解

1.3.1输入项标签

1.3.2 选择标签

1.3.3文本域标签

1.3.4表单标签

推荐阅读更多精彩内容