1.5 html基本语法特性2

2017-02-15 本文已影响163人 cd72c1240b33

1. 上节课知识复习

HTML骨架结构，抽象的：

<!DOCTYPE …… >
<html>
    <head>
        网页的配置
    </head>
    <body>
        给用户看的
    </body>
</html>

DTD：
文档类型声明Doc Type Declaration，一共有7种DTD,3种html4.01;3种XHTML1.0；1种HTML5(后面详细的讲)；
三个小种类：
- strict(更为严格，不能用u,b,i)
- transitional(不怎么严格)，
- frame(框架)

（XHTML比HTML严格，比如必须是小写字母标签等）

meta标签-字符集<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- UTF-8 ：字符全，每个汉字3个字节，所以文件尺寸大；
- GB2312 : 字符少，每个汉字2个字节，所以文件尺寸小；
meta标签-关键词，页面描述
<meta name="description" content="页面描述"/>
<meta name="keywords" content="词，词"/>
title标签：就是页面的标题
html标签就是负责描述语义的，所以就用标签对的形式，给文本增加语义；
- h1~h6 标题
- p 段落，注意，里面只能放文本，图片，表单元素（这三个东西都是流元素）
img图片![](路径)
- 完整语法包含两个属性：src 和 alt
- src:source资源，图片中的路径是相对路径，从html触发，找到图片；
- alt:alternate替换物；
a标签，超级链接
- a标签常用的属性有三个：href=“地址” , title=“悬停文本”,target="_blank"
- a锚点的跳转：本页面不同模块跳转和不同页面不同模块跳转

//本页面不同模块跳转
<a href="#demo">到第一屏</a>
省略无数行代码。。。
<div id="demo">第一屏</div>
//不同页面不同模块跳转
//01page1
<a href="./02jianli.html#jianli">到第2屏</a>
//02jianli
<div><a href="#" id="jianli">这是简历页面</a></div>

调试工具：用chrome浏览器-审查元素

2. 列表：

列表有三种：

2.1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，不分先后；
ul:就是英文 unordered list，“无序列表”的意思；
li:就是英文 list item,"列表项"的意思；
li不能单独存在，必须包裹在ul里面；也就是说，ul的“儿子”不能是别的东西，只能有li；

<h3>中国互联网发达的城市</h3>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
        <li>杭州</li>
</ul>

ul的作用，不是给文字增加小圆点，而是增加无序列表“语义”的；ul的“儿子”只能是li标签，不能是别的语义标签；但是li是“容器级标签”，li里面什么都能放，放ul都没有问题；(js部分会讲多级菜单，就用li中套ul);
ul的应用场景：导航条；

2.2 有序列表

ol:英文名字ordered list(有序列表)

<h4>热门电视剧排行榜</h4>
<ol>
    <li>三生三世十里桃花</li>
    <li>孤芳不自赏</li>
    <li>神雕侠侣</li>
</ol>

2.3 定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：
- dl：表示 definition list 定义列表
- dt：表示definition title 定义标题
- dd：表示definition description 定义表述词；
dt、dd只能在dl里面；dl里面只能有dt、dd

<dl>
    <dt>html</dt>
    <dd>语义化标签，用来搭建页面结构的</dd>
</dl>
<dl>
    <dt>css</dt>
    <dd>样式表，用来给搭建好的页面添加样式的</dd>
</dl>
<dl>
    <dt>js</dt>
    <dd>行为，用来给页面增加动态效果的</dd>
</dl>

用什么标签，不是根据样子来决定，而是语义；

3. div和span

div和span都是非常重要的标签，

div标签是个块级元素，里面放置大东西；有个非常重要的作用：div标签负责布局，负责结构，负责分块；css负责样式；所以，一个静态页面，我们总亲切的称呼"div+css";

<div class="header">
    <div class="nav">导航条</div>
</div>
<div class="content">
    <div class="main">主要内容</div>
    <div class="slide">侧边栏</div>
</div>
<div class="footer">页脚</div>

span是个行内元素，里面放置小东西(文本，图片等)；

4. 表单

表单就是收集用户信息的，就是让用户填写，选择的；

<form action="提交到哪里" method="提交方式">
</form>

form表单有两个属性：action-提交到哪里； method：提交方式；

注册表单

4.1 文本框

<input type="text" value=""/>
- input表示“输入”，指的是这是一个“输入小部件”
- type表示“类型”
- text表示“文本”，指的是类型是一个文本框的输入小部件；
这是一个自封闭标签，自此，我们学习的自封闭标签有：

<meta name=”Keywords” content=”” />
<img src=”” alt=”” />
<input type=”text” />

value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：<input type="text" value="默认有的值" />

4.2 密码框 `<input type="password" />`

4.3 单选按钮

基本写法

<label>请选择你的性别:</label>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>你猜

注意：单选按钮，天生是不能互斥的，如果想互斥，必须有相同的name属性；name就是名字；
默认被选择，就应该书写checked=”checked”

4.4 复选框

基本写法

<p>
      <label>请选择你的爱好:</label>
      <input type="checkbox" name="sex"/>睡觉
      <input type="checkbox" name="sex"/>吃饭
      <input type="checkbox" name="sex"/>足球
 </p>

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

4.5 下拉列表

基本写法

<p>
      <label>请选择你的籍贯:</label>
      <select name="" id="">
          <option value="bj">北京</option>
          <option value="sh">上海</option>
          <option value="sx">山西</option>
          <option value="gz">广州</option>
      </select>
</p>

select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。

4.6 多行文本框（文本域）

标签textarea : text就是“文本”，area就是“区域”。
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。

4.7 三种按钮

按钮也是input标签，一共有三种按钮：

普通按钮 <input type="button" value="我是一个普通按钮" />
提交按钮 <input type="submit" />,这个按钮不需要些value，自动就有“提交”的文字；
重置按钮 <input type="reset" /> ；

1.5 html基本语法特性2

1. 上节课知识复习

2. 列表：

2.1 无序列表

2.2 有序列表

2.3 定义列表

3. div和span

4. 表单

4.1 文本框

4.2 密码框 `<input type="password" />`

4.3 单选按钮

4.4 复选框

4.5 下拉列表

4.6 多行文本框（文本域）

4.7 三种按钮

猜你喜欢

热点阅读

1.5 html基本语法特性2

1. 上节课知识复习

2. 列表：

2.1 无序列表

2.2 有序列表

2.3 定义列表

3. div和span

4. 表单

4.1 文本框

4.2 密码框 <input type="password" />

4.3 单选按钮

4.4 复选框

4.5 下拉列表

4.6 多行文本框（文本域）

4.7 三种按钮

猜你喜欢

热点阅读

4.2 密码框 `<input type="password" />`