4/05day26 _HTML

作者: 蹦蹦跶跶的起床啊 | 来源:发表于2020-04-05 20:04 被阅读0次

4/05day26 _HTML
web
利用Tab键快速创建html
HTML 4
HTML(4)
css项目样式
知识点总结
html5对比
input list datalist
2018-10-08 jQuery功能概括

day26 _HTML

一.HTML概述

HTML: 超文本标记语言
作用:搭建基础网页结构

超文本:不仅可以展示文字,还可以显示超链接,图片,音乐,视频等丰富内容.
标记语言:描述特定功能的标签.
W3C(World Wide Web Consortium)世界万维网联盟给我们定义好了这套标签.

HTML5

二.HTML基础

入门案例

<!--HTML5页面的默认声明,可以省略-->
<!DOCTYPE html>
<!--lang="zh" 告诉浏览器页面使用的主要语言是 zh中文 en英文-->
<html lang="zh">
<head>
<!--  meta标签的charset="UTF-8"属性告诉浏览器页面内容的字符集-->
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
    我的第一使用idea编写页面
</body>
</html>

项目模块结构

|-- css目录

|-- js目录

| -- img目录

|--index.html

HTML书写规范

组成
1.注释

2.标签可以有内容和属性
内容可以是文本也可以是标签
标签指明功能,属性指明特征
3.标签要正确嵌套

4.标签要正确关闭

<title> index </title> 有内容的是双标签, 需要有开始标签,有结束标签

<meta /> 没有内容的是单标签(自闭合标签) 需要在开始标签结尾直接结束

三.HTML常用标签

3.1-标题

<h1 align="center"></h1> (范围是1-6) 属性为 align 表示对齐方式

3.2-水平线

<hr color="red"/>

常用属性
- color
  
  光的三原色, color属性支持调色板编号
- width: 宽度
  
  单位px(像素) 固定值
  
  单位% 占的百分比

3.3-段落和换行

换行 <br/>
- 单标签
段落 <p><p/>
- 特点:上下留白

3.4-超链接

<a href="http://www.itcast.cn">绝对地址_黑马</a><br/>
<a href="./05-标题.html">相对地址./ 标题</a><br/>
<a href="../index.html">相对地址../ index.html</a><br/>
<a href="http://www.itcast.cn">绝对地址_黑马_self</a><br/>
<a href="http://www.itcast.cn" target="_blank">绝对地址_黑马_blank</a><br/>

. /表示当前同级目录

../表示上级目录

作用:跳转页面
常用属性
- href 跳向哪里取值网络地址取值有两种方式
1.绝对地址

2.相对地址(重要!!!) ./当前目录(默认可以不写) ../上一级目
- target 跳转方式( _self当前窗口(默认) _blank新开窗口)

3.5-图片

注意:
是个单标签, 图片宽高一般只设置一个值,另一个会等比例缩放

<img width="200px" title="黑马程序员" src="../img/itheima666.jpg" alt="此处黑马程序员出没">

常用属性

src 图片地址网络地址
width 宽度取值方式有两种

1.固定值例如 100px

2.自适应值所占父容器的百分比例如 50%
height 高度取值方式有两种

1.固定值例如 100px

2.自适应值所占父容器的百分比例如 50%

alt 图片src加载失败时的替换文字

3.6-列表

有序列表<ol></ol>

无序列表<ul></ul>

共同子标签：li 列表项目

<!--无序列表-->
<ul>
    <li>中国台湾</li>
    <li>中国香港</li>
    <li>中国澳门</li>
</ul>

<!--有序列表-->
<ol>
    <li>中国台湾</li>
    <li>中国香港</li>
    <li>中国澳门</li>
</ol>

3.7-容器标签

在html页面中根据标签占据空间方式不同,一般分为两类

块级标签特点:独占一行例如 hn,hr,p,ul,ol,li

内联标签特点:不会独占一行,占据空间由内容大小决定例如 font,b,i,a,img

HTML中的两个典型的容器标签

div 块级标签特点:独占一行实际开发中配合css使用

span 内联标签特点:不会独占一行,占据空间由内容大小决定实际开发中配合css使用

3.8-转义字符(实体字符)

半个英语字母英文空格&nbsp;
一个汉字中文空格&emsp;
小于号&lt;
大于号&gt;
&符号&amp;
×叉号&times;
￥人民币符号&yen;
美元符号$

3.9-基本表格

成嵌套

<table>
    <tr>
        <th><th/>
    <tr/>
    <tr>
        <td><td/>
    <tr/> 
</table>

table 表格常用属性
- border 表格边框默认单位像素px
- bgColor 背景颜色取值方式有两种
  - 1.颜色的英语的单词例如红red 绿green 蓝blue
  - 2.光的三原色(以#开头6位十六进制字符串) 例如红#ff0000 绿#00ff00 蓝#0000ff
- cellspacing 单元格之间的距离默认单位像素px
- cellpadding 单元格与内容之间的填充默认单位像素px
- width 宽度取值方式有两种
  - 1.固定值例如 100px
  - 2.自适应值所占父容器的百分比例如 50%
- height 高度取值方式有两种
  - 1.固定值例如 100px
  - 2.自适应值所占父容器的百分比例如 50%
- align 表格自己在父容器中的水平对齐方式取值 left居左 center 居中 right居右
tr 一行常用属性
- bgColor 背景颜色取值方式有两种
- height 高度取值方式有两种
  - 1.固定值例如 100px
  - 2.自适应值所占父容器的百分比例如 50%
- align 一行中所有单元格内容的水平对齐方式取值 left居左 center 居中 right居右
td 一个单元格常用属性
- width 宽度取值方式有两种
  - 1.固定值例如 100px
  - 2.自适应值所占父容器的百分比例如 50%
- align 表格中内容的水平对齐方式取值 left居左 center 居中 right居右
th 一个单元格(默认加粗居中,常用制作表头)
- caption 表格标题

<table border="1px" cellspacing="0" cellpadding="0" align="center"
     bgcolor="greenyellow" width="500px" height="300px">
    <caption>表格标题</caption>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题3</th>
    </tr>
    <tr align="center">
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td align="center">2-2</td>
        <td>2-3</td>
    </tr>
</table>

</body>
</html>

3.10-表格合并

td 单元格有两个属性可以用于表格合并
- colspan 跨列(从左向右跨列) 默认值1
- rowspan 跨行(从上向下跨行) 默认值1

<table border="1px" cellspacing="0" cellpadding="0" align="center"
       bgcolor="greenyellow" width="500px" height="300px">
    <tr>
        <td colspan="3">1-1</td>
<!--        <td>1-2</td>-->
<!--        <td>1-3</td>-->
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td rowspan="2">2-3</td>
    </tr>
    <tr>
<!--        <td>3-1</td>-->
        <td>3-2</td>
<!--        <td>3-3</td>-->
    </tr>
    
</table>

四.HTML表单

4.1表单介绍

作用: HTML的表单标签用于收集用户输入浏览器中的数据,并发送给服务器.

4.2表单控件

form 表单容器常用属性

action: 表单提交服务器的地址, (# 代表当前地址)
method: 表单的提交方式.
- get(默认)
  
  格式: 提交地址? username=张三&password=999
  
  特点: 参数在地址栏不安全.
  
  大小有限制(有文件上传必须为post方式)
- post
  
  特点: 参数没有在地址栏, 安全.(应用的是请求体)
  
  浏览器不会对请求体进行大小限制

表单项标签(form的子标签)

输入控件:<input/>的常用属性(
- name: 表单项的参数名(想要让表单能够提交, 必须知道name的值)
- value: 表单项的值(用户输入, 用户选择)
- type: 表单项类型
  - text 文本框(默认)
  - password 密码框 , 是掩码
  - date 日期选择框
  - radio 单选框(需要把name的值设置为一样的) checkd 设置为默认选中
  - check 复选框 checked设置默认选中
  - file 文件上传
  - placeholder 默认提示(占位符)
  - reset 重置按钮(清空表单)value就是按钮名称
  - submit 提交按钮value就是按钮名称
下拉框: <select></select>

子标签: <option></option>属性selected 设置默认选中
文本域:<textarea></textarea>
- cols 以字符计数的可视宽度
- rows 以行计数的可视高度
文本的辅助标签<lable>

案例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>20-表单控件</title>
</head>
<body>
<!--
form 表单容器 常用属性
    action 数据发送到哪里(Java服务器)
    method 数据发送方式 get post

表单控件 收集数据的标签
input 输入控件 具体功能由type属性决定 常用属性
    name 发送数据的参数名
    value 发送数据的参数值
    type 输入控件类型 常用取值
        text 普通文本框
        password 密码输入框 特点:掩码
        date 日期选择框 特点:弹出日期选择控件
        radio 单选框 特点 同一组(name值相等)单选框同时只能有一个选中 checked设置默认选中
        checkbox 复选框 特点 同一组(name值相等)复选框可以选中任何个 checked设置默认选中
        file 文件选择框 特点 可以选择一个文件发送给服务器

        reset 清空重置按钮 特点 清除用户输入的数据 value是按钮名称
        submit 提交按钮 特点 提交表单把数据发送给action指向的地址  value是按钮名称
        button 普通按钮 没有任何特殊功能  value是按钮名称 常配合JavaScript使用

label 表单控件的辅助标签 辅助input输入控件获取焦点 常用属性
    for 指向input标签的id属性

select 下拉列表 特点 提供固定的值供选择
    option 列表项目 selected 设置默认选中

textarea 多行文本域 特点 可以输入大量文字 常用属性
    cols 以字符计数的可视宽度
    rows 以行计数的可视高度
-->
<form action="#" method="get">
    姓名<input type="text" name="userName" placeholder="请您输入姓名" /><br/>
    密码<input type="password" name="userPass"/><br/>
    生日<input type="date" name="userBirth"/><br/>
    性别<input type="radio" name="gender" value="male" id="male"  checked/><label 
for="male"> 男&emsp;</label>
    <input type="radio" name="gender" value="female" id="female"/> <label 
for="female">女</label> <br/>
    爱好<input type="checkbox" name="hobby" value="smoke"/> 抽烟 &emsp;
    <input type="checkbox" name="hobby" value="drink" checked="checked"/>喝酒 
&emsp;
    <input type="checkbox" name="hobby" value="perm" checked/> 烫头&emsp;<br/>
    头像<input type="file" name="userPic"/><br/>
    学历
    <select name="userEdu">
        <option value="1">幼稚园</option>
        <option value="2">小学园</option>
        <option value="3" selected="selected">初中园</option>
    </select>
    <br/>
    简介<textarea name="userDesc" cols="50" rows="10">默认值</textarea>
<br/>
    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/>
    <br/>
    <input type="button" value="普通按钮"/>
</form>

</body>
</html>

老师总结

1. 学习目标

1. 会使用页面中的文字,超链接,图片,列表,特殊符号
2. 会使用表格完成页面布局
3. 掌握HTML表单控件

2. 基本结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        
    </body>
</html>

说明：
    <html> 网页根标签
    <head> 网页描述信息
    <body> 网页主体 （用户看到的内容）

3. 常用标签

1.标题标签
    使用h1~h6，从大到小表示六个等级的标题显示。
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
    常用属性：align="center", 标题居中显示。(left居左,center居中,right居右)
   
 
2.水平线
    <hr/> 单标签。
    常用属性：
        color: 颜色
        width: 线的宽度，单位是像素
        size: 大小，粗细
    <hr size="10" color="#64FF99" width="90" align="left"/>


3.段落标签
    <p>文本</p>
    常用属性：
        title: 鼠标放上去后会显示提示。
        align: 水平对齐方式。      
    <p align="center" title="html">
        HTML称为超文本标记语言，是一种标识性的语言。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等.
    </p>
    
        
4.超链接
    <a href="url地址" target="打开方式">显示内容</a>
    href属性：
        超链接跳转的url地址。可以使用相对地址和绝对地址。、
        内部资源多使用相对路径 ./  ../ 
        外部资源多使用绝对路径 http://域名
    target属性：
        _self ：在当前窗口打开（默认方式）
        _blank：在新窗口打开


5.图片
    <img/>属于单标签
    <img src="资源路径" title="鼠标放上去的显示信息" width="图片显示宽度" alt="失败提示">
    src属性: 资源路径，可以使用相对路径或绝对路径
    
    
6.列表    
    无序列表
        <ul>
            <li>java</li>
        </ul>     
    有序列表   
        <ol> 
            <li>java</li>
        </ol>       
    ul和ol都有一个type属性，可以指定列表的样式
        ul type取值: disc(实心圆)  circle(空心圆) square(实心正方形)
        ol type取值: 1(数字顺序)  A(字母顺序)  I(罗马数字顺序)

            
7.块标签和内联标签
    在html页面中根据标签占据空间方式不同,一般分为两类
        块级标签: 独占一行 例如h1~h6, p, ul, ol等。
        内联标签: 不会独占一行,占据空间由内容大小决定 例如 font, a, img, span等
    HTML中的两个典型的容器标签
        <div>标签:  块级标签，独占一行。
        <span>标签: 内联标签,不会独占一行,占据空间由内容大小决定。
      


8.实体字符
    英文空格 &nbsp;
    中文空格 &emsp;
    小于号 &lt; 
    大于号 &gt; 
    &符号 &amp;


9.文本控制
    加粗：<b>加粗内容</b>
    斜体：<i>斜体内容</i>
    换行：<br/>


10.表格标签
        <caption> 表格标题。
        <table>  表格标签。
        <tr>     表示一行。
        <th>     表头单元格，默认有加粗居中的效果。
        <td>     普通单元格，默认是左对齐。 
    常用属性：
        width   表格的宽度，有固定像素值和百分比两种取值方式。
        height  表格的高度，有固定像素值和百分比两种取值方式。
        border  表格的外边框粗细，单位是像素px，不写时默认为0，可以隐藏边框线。
        align   对齐的方式，可以同时用在table，tr，td
        bgColor 背景颜色 取值方式有两种，英文单词或者十六进制表示
        rowspan 单元格跨几行
        colspan 单元格跨几列
        cellspacing 单元格与单元格之间的距离
        cellpadding 单元格内容与边框之间的距离padding(内间距)

常用标签汇总

标签	作用	常见属性
`<h1>~<h6>`	表示标题，1级标题最大	align
`<hr/>`	水平线	align,color,width
`<p>`	段落	align,title
`<a>`	超链接	href, targe (_self, _blank)
`<ul>~<li>`	无序列表，(实心圆，空心圆，正方形)	type
`<ol>~<li>`	有序列表，(数字1，字母A，罗马数字I)	type
`<img/>`	图形标签	src, title, width, alt
`<div>`	块标签，独占一行
`<span>`	内联标签，不会独占一行，大小由内容决定
`<b>`	加粗
`<i>`	斜体
`<br/>`	换行
`<table>`	表格	width,height,border,align, bgcolor,cellspacing,cellpadding
`<caption>`	表格标题
`<tr>`	表格的行	height, align, bgcolor
`<td>`	表格的列（单元格）	rowspan(跨行数) ，colspan(跨列数)
`<th>`	表格的表头(默认加粗)

4. 表单标签

form标签

属性	说明
action	规定当提交表单时，向何处发送表单数据。
method	数据发送方式，常见的GET，POST

http协议明文传输

https 安全应用层 http SSL(数据加密) 传输层tcp

input标签

常用属性	说明
type	规定input标签的类型，具体取值参照下表
name	input表单的名称，相当于参数名
value	input表单的值，相当于参数值
checked	设置单选框，复选框等默认被选中
maxlength	设置输入框输入的字符最大长度
disabled	禁用该input标签
readonly	只读属性，设置后无法修改标签的值

type属性值	说明
text	普通文本框，maxlength可限制输入长度
password	密码输入框，特点:掩码
checkbox	复选框，同一组(name值相等)，可多选，checked设置默认选中
radio	单选框，同一组(name值相等)，只能选择一个，checked设置默认选中
button	按钮，value可设置按钮名称，可以用`<button>`按钮代替
submit	提交按钮，点击后会讲表单数据发送到action指向的地址。
reset	重置按钮，点击按钮，可清除表单中输入的数据。
date	日期选择框控件
file	文件对话框控件，可以选择文件发送给服务器。
hidden	隐藏标签，不会在浏览器显示标签，可以携带隐式数据到服务器。
color	颜色选择器

select标签

下拉列表，可以提供固定值供选择

标签	属性	说明
`<select>`	name	规定下拉列表的名称
	size	规定下拉列表中可见选项的数目，默认是1
	disabled	禁用该下拉列表。
`<option>`	value	发往服务器的选项值
	selected	首次加载时的默认选中项
	disabled	禁用选项，加上后该option无法被选中。

textarea标签

多行文本域，可以用于输入大量文本。

属性	说明
cols	以字符计数的可见宽度。
rows	规定文本区内的可见行数。
name	设置文本区的名称，即发往服务器的参数名。
readonly	设置文本区为只读。
disabled	禁用该文本区。

5. 练习案例

练习1

使用html实现以下页面效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家电排行</title>
</head>
<body>

    <h2>家用电器排行版</h2>
    <img src="../imgs/tv01.jpg" title="创维42E5CHR">创维42E5CHR 42英寸 <font color="red">￥2799.00</font>
    <hr width="400" align="left">
    <img src="../imgs/tv02.jpg" title="海信电视" />海信LED42EC260JD 42英寸 <font color="red">￥2848.00</font>
    <hr width="400" align="left">
    <img src="../imgs/tv03.jpg" title="索尼电视" />索尼 KLV-40R476A 40英寸 <font color="red">￥3599.00</font>
    <hr width="400" align="left">
    <img src="../imgs/tv04.jpg" title="创维42E83RE" />创维42E83RE 42英寸 <font color="red">￥3699.00</font>
    <hr width="400" align="left">
    <img src="../imgs/tv05.jpg" title="创维42E7BRE" />创维42E7BRE 42英寸 <font color="red">￥3299.00</font>
    <hr width="400" align="left">
</body>
</html>

练习2

使用html实现网页版试卷的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线考试卷</title>
</head>
<body>
    <h2>HTML在线考试试题</h2>
    <ol>
        <li>HTML中，换行使用的标签是 ( )
            <ol type="A">
                <li>&lt;br/&gt;</li>
                <li>&lt;p&gt;</li>
                <li>&lt;hr/&gt;</li>
                <li>&lt;img/&gt;</li>
            </ol>
        </li>
        <hr/>
        <li>&lt;img/&gt;标签的 ( )属性用于指定图像的地址
            <ol type="A">
                <li>alt</li>
                <li>href</li>
                <li>src</li>
                <li>addr</li>
            </ol>
        </li>
        <hr/>
    </ol>
</body>
</html>

练习3

使用表格标签实现以下页面效果。

要求：

表格宽度占浏览器一半，并在页面居中。

表格内容居中，行高40像素，列宽平均分配。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="2" width="50%" align="center" 
        style="border-collapse: collapse;table-layout: fixed;">
    <caption><h2>个人简历表</h2></caption>
    <tr align="center" style="height:40px">
        <td>求职意向</td>
        <td colspan="6"></td>
    </tr>
    <tr>
        <td align="center" colspan="7" bgcolor="#a9a9a9" style="height: 20px">
            <b>基本信息</b>
        </td>
    </tr>
    <tr align="center" style="height:40px">
        <td>姓名</td>
        <td></td>
        <td>性别</td>
        <td></td>
        <td>民族</td>
        <td></td>
        <td rowspan="4">照片</td>
    </tr>
    <tr align="center" style="height:40px">
        <td>出生日期</td>
        <td></td>
        <td>政治面貌</td>
        <td></td>
        <td>婚否</td>
        <td></td>
    </tr>
    <tr align="center" style="height:40px">
        <td>籍贯</td>
        <td></td>
        <td>现所在地</td>
        <td></td>
        <td>学历</td>
        <td></td>
    </tr>
    <tr align="center" style="height:40px">
        <td>毕业院校</td>
        <td colspan="2"></td>
        <td>所学专业</td>
        <td colspan="2"></td>
    </tr>
    <tr align="center" style="height:40px">
        <td>电子邮件</td>
        <td colspan="2"></td>
        <td>手机号码</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td align="center" colspan="7" bgcolor="#a9a9a9" style="height: 20px">
            <b>教育经历</b>
        </td>
    </tr>
    <tr  align="center" style="height:40px">
        <td colspan="2">起止时间</td>
        <td colspan="2">毕业院校</td>
        <td colspan="3">专业课程</td>
    </tr>
    <tr  align="center" style="height:40px">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="3"></td>
    </tr>
    <tr  align="center" style="height:40px">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="3"></td>
    </tr>
</table>
</body>
</html>

附表：实体字符表

4/05day26 _HTML
day26 _HTML 一.HTML概述 HTML: 超文本标记语言作用:搭建基础网页结构超文本:不仅可以展示...
web
web标准结构（html）、表现（css）、行为（js） html5与html4的区别 HTML4： Web浏...
利用Tab键快速创建html
如何快速创建html模版输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全ht...
HTML 4
1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？...
HTML(4)
哈哈我的markdown 问答一、网页乱码的问题是如何产生的？怎样解决？产生原因：编写网页代码时保存的编码和浏...
css项目样式
css html 模块4个角：应对网页在4K电视上失真的问题image.png html css html: css:
知识点总结
HTML HTML&XHTML&HTML5HTML4，HTML5，XHTML 之间有什么区别？ - 知乎属性ja...
html5对比
下面来对比一下html4和html5在写法上的不同传统html4的写法为 html5的写法为 html5代码规范:...
input list datalist
HTML5的input标记新增部...
2018-10-08 jQuery功能概括
1、html的元素选取； 2、html的元素操作； 3、html dom遍历和修改； 4、html事件操作； 5、...