HTML_03

1. 表单

2. input元素

2.1 密码框 同 文本框

<tr>

        <td width = "100px" > 密码 </td>

        <td>

                <input type = "password" size = "10" maxlength = "10"  placeholder = " 请输入密码 " />

        </td>

</tr>

2.2 单选按钮：radio

name 属性必须写，标记为一组单选

value 值必须有， 提交区分

checked: 特殊属性： 默认被选中

<td>

男 <input type = "radio" name = "sex" value = "1" />

女 <input type = "radio" name = "sex" value = "2" checked />

</td>

2.3 复习框： checkbox

name 属性必须写，标记为一组多选

value 值必须有， 提交区分

checked: 特殊属性： 默认被选中

<td> 游戏 </td>

<td>

<input type = "checkbox" name = "games" value = "LOL" checked

/> LOL

<input type = "checkbox" name = "games" value = "CSGO" /> CSGO

<input type = "checkbox" name = "games" value = "DNF" /> DNF

</td>

2.4 各种按钮

2.4.1 submit: 用于提交的按钮

value ： 按钮的内容

2.4.2 button: 普通按钮，不能提交

2.4.3 image: 图片按钮，可以提交

2.4.4 button标签： 也是可以提交

2.4.5 reset： 重置按钮

<input type = "submit" value = " 提交 " /> 能提交

<input type = "button" value = " 按钮 " /> 不能提交

<input type = "image" src = "../imgs/btn.gif" /> 能提交

<button> button 标签按钮 </button> 能提交

<input type = "reset" value = " 重置 " > 重置到页面初始状态

2.5 其他input:的type: 新增

color ： 选色器 ： value=#FF00FF

number: 数值 min 最小值， max 最大值， step 增量

range: 数值范围 min 最小值， max 最大值， step 增量

date: 日期

time: 时间

search: 搜索框，多个了 x

email ： 邮箱的验证

url: url 的验证

<tr>

        <td> 喜欢颜色 </td>

        <td>

                <input type = "color" value = "#00FF00" />

        </td>

</tr>

<tr>

        <td> 数值 1 </td>

        <td>

                <input type = "number" min = "0" max = "100" step = "2" />

                range范围

                0 <input type = "range" min = "0" max = "100" step = "2" /> 100

        </td>

</tr>

<tr>

        <td> 生日 </td>

        <td>

                <input type = "date" value = "2000-01-01" />

                <input type = "datetime" />

                <input type = "time" />

        </td>

</tr>

<tr>

        <td> 搜索 </td>

        <td>

                <input type = "search" />

        </td>

</tr>

<tr>

        <td> 邮箱 </td>

        <td>

                <input type = "email" />

        </td>

</tr>

<tr>

        <td> 主页 </td>

        <td>

                <input type = "url" />

        </td>

</tr>

3. textarea: 多行文本输入框

rows: 显示的行数

cols: 显示的列数， 和 text 的 size 不准

textarea 的内容就是 value; 注意不写内容 ·

<tr>

        <td> 个人的简介 </td>

        <td>

                <textarea rows = "10" cols = "10" ></textarea>

        </td>

</tr>

4. 下拉框： select>option

4.1 select

size: 显示的个数

multiple ： 多选

4.2. option：

value ： 用于提交的值

label: 等同于内容

selected: 最后一个特殊属性。默认被选中

4.3. optgroup: 分组

<tr>

        <td>省 </td>

        <td>

           <select name="p">

                <select name="p" size="5" multiple="multiple">

                <option value="-1">请输入</option>

                <option value="1">辽宁</option>

                <option value="2" selected label="吉林"></option>

                <option value="3">黑龙江</option>

                <option value="4">内蒙古</option>

                <option value="5">河北</option>

           </select>

        </td>

</tr>

<tr>

        <td>国家 </td>

        <td>

                <select name="p">

                        <optgroup label="亚洲">

                        <option value="1">中国</option>

                        <option value="2">日本</option>

                        <option value="3">韩国</option>

                        <option value="4" selected>新加波</option>

                </optgroup>

                <optgroup label="非洲">

                        <option value="5">南非</option>

                        <option value="6">尼日利亚</option>

                        <option value="7">坦桑尼亚</option>

                        <option value="8">喀麦隆</option>

                </optgroup>

                </select>

        </td>

</tr>

5. 其他的

5.1 Label:

for ： 属性关联某个 input 的 id 。 点击获取焦点

<td width = "100px" >

<label for = "psd" > 密码 </label>

</td>

<td><input type = "password" id = "psd" size = "10" maxlength = "10"

placeholder = " 请输入密码 " /> </td>

5.2 fieldset> legend包裹输入项

<fieldset>

<legend align = "center" > 这是注册内容 </legend>

。。。。

5.3 form属性关联formid:

<form id = "form0" >

...

</form>

这个 form0 中提交会带着 输入项

<input type = "text" name = "outform" form = "form0" />

6.HTML5语义标签

块的语义标签：

article : 文章， 强调独立性

section: 章节， 并列性

aside: 侧边栏

main: 主体

header: 头部

footer: 脚

nav: 导航

<header>

header

<nav> nav </nav>

</header>

<main>

main

</main>

<aside>

aside

</aside>

<article>

article

</article>

<section>

section

</section>

<footer>

footer

</footer>

7. 框架和内联框架

7.1. frameset： 没有body

rows: 定义分行

cols: 定义分列

7.1.1 fram标签

src ； 关联子页面

<frameset rows = "10%, *" >

<frame src = "top.html" />

<frameset cols = "200px, *" >

<frame src = "left.html" />

<frame src = "main.html" name = "a1" />

</frameset>

</frameset>

left.html中的链接的target=”a1" 框架中的a1发送跳转

<ul>

<li><a href = "https://www.baidu.com" target = "_top" > 百度 </a></li>

<li><a href = "./lesson09.html" target = "a1" > 表单 </a></li>

<li><a href = "./lesson10_ 语义 .html" target = "a1" > 语义块 </a></li>

</ul>

7.2 iframe .内联框架

main <a href = "https://www.bilibili.com/" target = "if" > B 站 </a>

<a href = "https://www.37.com/" target = "if" > 37 玩 </a>

<iframe src = "https://www.bilibili.com/" frameborder = "0" width = "100%"

height = "600" name = "if" ></iframe>

8 CSS： Cascading Style Sheet 层叠样式表

8.1 css能放在哪？

1. 内联样式，行内样式： 写在 style 属性上

2. 内部样式： style 标签定义

3. 外部样式： 通过 link 标签引入

4. @import url(); 页面加载完标签之后再加载样式

<!DOCTYPE html>

<html lang = "en" >

<head>

<meta charset = "UTF-8" >

<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

<title> Document </title>

<!-- 外部样式 -->

<link rel = "stylesheet" href = "lesson12.css" type = "text/css" />

<style type = "text/css" >

@import url ( './lesson12_1.css' );

/* 内部样式 */

h1 {

border : 1px solid black ;

}

</style>

</head>

<body>

<!-- 内联样式，行内样式 -->

<h1 style = "color: red" > hello css </h1>

</body>

</html>

lesson12.css

h1 {

background-color: rgba(255, 0, 0, 0.5);

}

lesson12_1.css

h1 {

border-radius: 16px;

}

9 选择器：

元素选择器 : * 通配 。 权重 1

类选择器： 用 . 定义， 权重 10

id 选择器，用 # 定义， 权重 100

!important ； 可以忽略权重

<style>

/* id 选择器 */

#a1 {

color : saddlebrown ;

}

/* 元素选择器 */

* {

color : red ;

}

h1 {

color : green !important ;

}

/* 类选择器 */

.bgg {

color : yellow ;

}

.bgr {

background-color : green ;

}

</style>

</head>

<body>

<div>

<h1 id = "a1" class = "bgg bgr" > hello world h1 </h1>

<span class = "bgg" > 行内元素 </span> <h1> hello world h1 </h1>

<h1> hello world h1 </h1>

<span> 行内元素 </span>

<span> 行内元素 </span>

<strong> strong 强调 </strong>

</div>

<div>

<h1> hello world h1 </h1>

<span> 行内元素 </span>

</div>

</body>

派生选择器，后代选择器。用空格

空格， 后代就可以

> 一代子，一级子。

+: 同辈 ， 相邻，弟弟。

~ ： 同辈， 弟弟

<!DOCTYPE html>

<html lang = "en" >

<head>

<meta charset = "UTF-8" >

<meta http-equiv = "X-UA-Compatible" content = "IE=edge" >

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

<title> Document </title>

<style>

/* id 选择器 */

/* #a1 {

color: saddlebrown;

} */

/* 元素选择器 */

/* * {

color: red;

}

h1 {

color: green !important;

} */

/* 类选择器 */

/* .bgg {

color: yellow;

}

.bgr {

background-color: green;

} */

/* div h1 {

font-style: italic;

} */

/* 一级子 */

/* div > h1 {

font-style: italic; }

/* 相邻的弟弟 */

/* h1 + div {

text-decoration: underline;

} */

/* 所有的弟弟 */

div ~ h1 {

text-shadow : 10px 10px 1px red ;

}

</style>

</head>

<body>

<h1> div 外的 h1 </h1>

<hr />

<div>

<h1 id = "a1" class = "bgg bgr" > hello world h1 </h1>

<xxx>

<h1 id = "a1" class = "bgg bgr" > DIV 的孙子 </h1>

</xxx>

<span class = "bgg" > 行内元素 </span>

<h1> hello world h1div 的哥哥 </h1>

<div> hello world h1 的 弟弟 </div>

<div> hello world h1 二弟弟 </div>

<h1> div 的 1 弟弟 </h1>

<span> 行内元素 </span>

<h1> div 的 3 弟弟 </h1>

<span> 行内元素 </span>

<strong> strong 强调 </strong>

<h1> div 的 15 弟弟 </h1>

</div>

<div>

<h1> hello world h1 </h1>

<span> 行内元素 </span>

</div>

</body>

</html>