HTML入门

HTML 简介

HTML:HyperTextMarkup Language,超文本标记语言。即描述文档语义的语言。HTML能够通过标签给文本增加语义，这是 HTML 唯一能够做的。这些标签在浏览器中是看不到的，所以称为“超文本”，也就是“超文本标记语言”了。

现在的标准是，HTML 负责描述页面的语义，CSS负责描述页面的样式，js负责描述页面的动态效果。

HTML:超文本标记语言，从语义的角度描述页面结构。

CSS:层叠样式表， 从审美的角度描述页面样式。

JS:JavaScript， 从交互的角度描述页面行为。

比如问： h1标签有什么作用？

答：给文本增加主标题的语义。

涨姿势的系统名称

ERP: Enterprise resouce planning 企业资源计划
CRM：custom relationship management 客户管理系统
CMS: content management system 内容管理系统

列表

无序列表

无序列表，用来表示一个列表的语义，表示每个项和项之间是不分先后排名的。ul：unordered list。li：list item，列表项

        ul {
            list-style: none;
        }

``` ##### 有序列表

ol：ordered list。li：list item，列表项。ol 用的场景不多，一般都是用 ul。li 是容器级标签，但不能说 ol 是容器级标签。

``` ##### 定义列表

定义列表也是一个组标签。不过比较复杂，共3个标签。dl: definition list dt:definition title dd:definition description。

北京< /dt>

国家的首都

```

表单的使用

<form action="提交地址" method="提交方式"></form>

input 标签

input标签的type常用的有：

1.文本类型.属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提示文字):

<input type="text">

2.密码框 password:

密码：<input type="password">

3.单选框radio：

性别：<input type="radio">男
　　  <input type="radio">女

4.复选框checkbox：

爱好：<input type="checkbox">编程
　　　<input type="checkbox">跑步
　　  <input type="checkbox">看书

下拉列表 select

select和 ul ol dl 一样，都是组标签：

<select>
    <option>河南</option>
    <option>河北</option>
    <option>湖南</option>
    <option>湖北</option>
    <option>江西</option>
    <option>广东</option>
</select>

留言框textarea

<textarea name='' id='' cols='30' rows='10'></textarea>

按钮Button

普通button：

<input type="button" value="点我获取更多">

提交按钮 submit：

<input type="submit" value="提交按钮">

重置按钮reset:

<input type="reset" value="清空">

label便签

现象：选择性别时，点击文字不能够勾选对应的选项。

原因：男 和女 两个汉字和 input元素没有关系。

请选择您的性别：
<input type='radio' name='sex'/>男
<input type='radio' name='sex'/>女

解决办法：

因为label和input并没有嵌套关系，如果需要使input和label绑定到一起，需要在input中绑定id，在label中使用for来绑定。

请选择您的性别：
<input type='radio' name='sex' id='nan' checked='checked'/><label for='nan'>男</label>
<input type='radio' name='sex' id='nv'/><label for='nv'>女</label>

如果是嵌套关系，则不需要通过id来绑定了。当然，加上去也没有关系。

 <label >男<input type="radio"  name="sex"/></label>
    <label >女<input type="radio"  name="sex" checked/></label>

字符实体

想在页面输出<h1>这样的字符，但 HTML 会把其解析为一个标签。那么就需要用到字符实体了：

&lt; <      less than 小于的意思
&gt; >      greater than 大于的意思
&nbsp;      空格
&amp;       &
"           &quot;

HTML 的废弃标签介绍

<font size='7' color='red'>哈哈</font>   最大到7

标签b u i del em 这些标签现在都作为 CSS 的钩子使用，而不是原来的语意：

<b>加粗</b>

<u>下划线</u>

<i>倾斜</i>

<del>删除线</del>

<hr/> 画一个水平线 

<em>强调</em>   倾斜的字体 

<strong>强调</strong> 加粗的字体

总结文本标签：

    加粗：b（<b>内容</b>），strong（<strong>内容</strong>）
    倾斜：i（<i>内容</i>），em（<em>内容</em>）
    删除线：del（<del>内容</del>），s（<s>内容</s>）
    下划线：u（<u>内容</u>），ins（<ins>内容<ins>）
    变大：big：<big>内容</big>；115%
    变小：small：<small>内容</small>；85%
    上标：sup：<sup>内容</sup>
    下标：sub：<sub>内容</sub>
    字体：font（<font>内容</font>）属性【color颜色，size大小，face样式】


书名为：&lt;坏蛋是怎样炼成的&gt;价格是&yen;55,&copy;清华大学