HTML笔记1

最新推荐文章于 2024-09-27 09:37:38 发布

迷失的虚无

最新推荐文章于 2024-09-27 09:37:38 发布

阅读量342

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/moonlightwalk/article/details/55214525

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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(不怎么严格）、frameset.
- XHTML 总体上要比HTML严格，比如必须是小写字母标签等等。
字符集Charest,

<meta http-equiv="Content-Type" content="text/html:charset="UTF-8">

- UTF-8：字符全，每一个汉字3个字节，所以文件尺寸大。
- gb2312(gbk)：字符小，每一个汉字2个字节，所以文件尺寸小。

- 关键词、页面描述。

<meta name="Keywords" content="词”/>
<meta name="Description" content="页面描述"/>

title标签就是页面标题
HTML就是负责描述语义的，所以就是用标签对儿的形式来给文本增加语义。
- h1 ~ h6 标题
- p 段落
  p标签要注意的是，里面只能放文本、图片、表单元素
img图片
- src: source 资源
- alt：alternate替代物

<img src="路径" alt="替代文本，当图片不能显示的时候，显示这里的文字"/>

图片里面的路径，相对路径，从html出发，找到图片。

<img src="images/aaa/a.png" alt=""/>
<img src="../../a.png alt=""/>

a标签，超级链接
- a 是英语 anchor 黛的意思。
- a标签常用的三个属性：

<a href="网址" title="悬停文本" target="_blank">超级链接文字</a>

页面内的锚点，用name属性或者 id 属性

<a name="girl"></a>
<a id="girl"></a>

如果想跳转到某个锚点：

<a href="#girl"></a>

Chome 浏览器，审查元素功能快捷键是 F12.

二、列表

1. 无序列表
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间是不分先后的。

<ul>
    <li>北京</li>
    <li>武汉</li>
    <li>Shengzheng</li>
</ul>

ul 就是英语 unordered list, “无序列表”的意思。
li 就是英语 list item,“列表项”的意思。
- 所有的li不是单独存在的，必须包裹在 ul 里面；反之，ul 的“儿子”不能是另的东西，只能有 li.
- li 是一个容器级标签，li 里面什么都能放。甚至可以再放一个 ul。

2. 有序列表
ordered list 有序列表，用 ol 表示

<ol>
    <li>黄瓜</li>
    <li>茄子</li>
</ol>

3.定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签；

dl 表示 definition list 定义列表
dt 表示 definition title 定义标题
dd 表示 definition description 定义表述词

dt、dd 只能在 dl 里面； dl里面只能有 dt、 dd

<dl>
    <dt>武汉</dt>
    <dd>周黑鸭，户部巷</dd>
    <dt>上海</dt>
    <dd>汤包</dd>
</dl>

表达的语义是两层：
1. 是一个列表，列出了武汉，上海丙个项目
2. 每一个诩都有自己的描述项。
3. dd 是描述 dt 的。

定义列表用法非常灵活，可以一个 dt 配多个 dd;

<dl>
    <dt>武汉</dt>
    <dd>华中腹地，全国交通枢纽</dd>
    <dd>污染很严重</dd>
    <dt>上海</dt>
    <dd>魔都</dd>
</dl>

武汉这个项目，用了两个 dd 来描述
还可以拆开，让每一个 dl 里面只有一个 dt 和 dd, 这样会清晰些。

<dl>
    <dt>武汉</dt>
    <dd>华中腹地，中国交通枢纽</dd>
    <dd>污染很严重</dd>
</dl>
<dl>
    <dt>上海</dt>
    <dd>魔都</dd>
</dl>

dt、dd 都是容器级标签，想放什么都可以。因此可知：用什么标签，不是根据样子来决定，而是语义。

三、div 和 span

div 和 span 是非常重要的标签，
- div 的语义是 division “分割”；
- span 的语义就是 span “范围、跨度”。

<div>
    <h3>武汉主要区</h3>
    <ul>
        <li>江汉</li>
        <li>江岸</li>
        <li>江山</li>
    </ul>
</div>

div 在浏览器中，默认是不会增加任何的效果，但是语义变了，div 中的所有元素是一个小区域。
div 标签是一个容器级标签，里面什么都能放，甚至可以放 div自己。

span 也是表达“小区域、小跨度”的标签，但是一个“文本级”的标签。
span 里面只能放置文字、图片、表单元素。
span 里面不能放 p、h、ul、dl、ol、div。
span 里面是放置小元素的，div 里面放置大东西的；

<p>
    简介简介简介简介简介简介
    <span>
        <a href="">详细信息</a>
        <a href="">购买</a>
    </span>
</p>

div 标签是最重要的布局标签

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="art"></div>
    <div class="dongxi"></div>
</div>
<div class="footer"></div>

这种模式叫做 “div + css” 。div 标签负责布局，负责结构，负责分块。css 负责样式。

四、表单

表单是用于收集用户信息，就是让用户填写、选择。

<div>
    <h3>欢迎光临</h3>
    <form action="">所有的表单内容，都要写在form标签里面</form>
</div>

form 是英语表单的意思。form标签里面有 action 属性和 method 属性。

action 属性就是表示，表单将提交到哪里。
method 属性表示用什么 HTTP 方法提交，有get、 post 两种。

1. 文本枢

<input type="text">

input 表示“输入”，指的是这量一个“输入小部件”
type 表示“类型”
text 表示“文本”，指的是类型是一个文本框的输入小部件
value 表示“值”，value 属性就是默认有的值，文本框中已经被填写好了。

2. 密码框

<input type="password"/>

input 标签即是文本框，又是密码框。
如果 type = “text” 文本框
如果 type = “password” 密码框

3.单选按钮

只能选择一个，术语叫做“互斥”。

<input type="radio" name="sex"> 男，
<input type="radio" name="sex"> 女，

radio是“收单机”的意思，input 的 type 值，如果是 radio 就是单选按钮。
单选按钮，天生不能互斥，如果想互斥，必须要有相同的name属性。
默认被选择，就应该书写 checked = “checked”

<input type="radio" name="sex" checked="checked"/>

4.复选框

input 标签的 type 属性是 checkbox.

<p>
    请选择你的爱好：
    <input type="checkbox" name="bobby">睡觉
    <input type="checkbox" name="bobby">吃饭
    <input type="checkbox" name="bobby">再睡觉
    <input type="checkbox" name="bobby">继续睡
    <input type="checkbox" name="bobby">还在睡
</p>

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

5.下拉列表

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

<select>
    <option value="">江岸</option>
    <option value="">江汉</option>
    <option value="">洪山</option>
    <option value="">江夏</option>
    <option value="">黄陂</option>
    <option value="">新洲</option>
    <option value="">汉阳</option>
</select>

6.多行文本框（文本域）

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

这个标签是标签对，里面不用写东西。如果在里面写，就是这个文本框的默认文字。

cols 属性表示 columns“列”
rows 属性表示 rows“行”
值是一个整型，表示多少行，多少列。

7.三种按钮

按钮也是 input 标签，一共有三种按钮：
1. 普通按钮

<input type="button" value="我是一个变通按钮">

button 就是英语“按钮”的意思。
value 就是“值”的意思，也就是按钮上面显示的文字。

2. 提交按钮

<input type="submit"/>

submit 就是英语“提交”的意思。这个按钮不需要写 value，自动显示“提交”文字。
这个按钮被点击，表单就会提交。
这个表单就会被提交到 form 标签的 action 属性中的页面里。

3.重围按钮

<input type="reset"/>

reset 就是“复位”的意思。

8.lable 标签

本质上讲，“男”和“女”这两个汉字，和 input 元素没有关系。

<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女

lable 就是解决这个问题的。

<input id="nan" type="radio" name="sex"> <label for="nan">男</label>
<input id="nv" type="radio" name="sex"> <label for="nv">女</label>

input 元素要有一个 id，然后 label 标签就有一个 for 属性，和 id相同，表示绑定了，这个 label 和 input 就有绑定关系了。

六、其它

字符实体

&lt

小于符号

&gt

大于符号

&nbsp

版权符号

迷失的虚无

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录