HTML 入门

HTML 的历史

超文本标记语言( HyperText Markup Language,简称为HTML)—— 在1993年6月作为互联网工程工作小组工作草案发布。现在使用的 HTML5 ——2014年10月28日,W3C 推荐标准。
总而言之,学 HTML 就是学习各种 HTML 标签
HTML 标签主要语法:

<标签符>标签包裹的内容</标签符>
<!--
    注意:
        一般来说,标签都是成对出现的,但是也有例外,比如单标签,那么这种标签,我们称之为 自闭和标签 
-->

HTML 的大体结构

HTML 的大体结构

HTML的常用标签

  • 标题标签 h1~h6 (文章标题)
  • 段落标签 p (可以将HTML文档分割成若干段落)
  • 加粗 strong/b (文字加粗功能)
  • 斜体 em/i (文字斜体功能)
  • 超链接和锚点 a (网页链接)
  • 图片标签 img (网页的图片)
  • 换行 br (换行)
  • 分割 hr(分割线)
  • span 标签 (一般用来组合其它标签)
  • div 标签(分割文档 形成不同的部分)
  • 特殊符号(见下表)
  • 列表标签
HTML代码 显示效果 描述
&lt; < 小于号
&gt; > 大于号
&nbsp; space 空格
&emsp; space 空白位
&copy; © 版权
&amp; & 可用于显示其它特殊字符

标题标签

<!--  一个页面只能有一个h1标签  -->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

段落标签

<!-- 前后自动换行 -->
<p>祝你有酒有肉有姑娘</p>
<p>祝你有诗有歌有远方</p>
<p>祝你一入Python深似海, 从此妹纸是路人</p>

列表标签

列表分为了三种:无序列表、有序列表以及定义列表

无序列表
<ul>
    <h3>ul无序列表</h3>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>
有序列表
<ol>
    <h3>ol有序列表</h3>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>
定义列表
<dl>
    <h3>dl列表</h3>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>Javascript</dt>
    <dd>脚本语言</dd>
</dl>

dt 定义列表中的项目
dd 描述列表中的项目

表格标签 table
标签 描述
<table> 定义表格
<caption> 定义表格标题
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
<!-- 一个完整的表格一般是包括 表头,表身和表脚 -->
<table>
    <thead>
        <tr>
            <th> name </th>
            <th> age </th>
            <th> mail </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 付帅帅</td>
            <td> 18 </td>
            <td> fuhandsome0219@gmail.com </td>
        </tr>
    </tbody>
    <!-- 一般来说表脚用的并不是很多 --> 
    <tfoot>
        <tr>
            <td> 第一列 </td>
            <td> 第二列 </td>
            <td> 第三列 </td>
        </tr>
    </tfoot>
</table>
<!--  
    rowspan  合并行
    colspan  合并列
-->

块级标签和行内标签

一般来说,HTML的标签整体大致可分为两类,行内标签和块级标签

块级标签(block):
独占一行,排斥和其它标签位于同一行
行内标签(inline)
可以和其它行内元素位于同一行

form表单

表单是包含表单元素的区域,表单元素是允许用户在表单中(比如:输入框,文本域,下拉列表等等)的输入的元素

<form action="" method="">
    <p>用户名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>
</form>
<!-- 
    action 表示要提交的地址   默认当前页面 
    method 表示要提交的方法 默认使用get方法 有get和post
    enctype 有三种编码
        默认:application/x-www-form-urlencoded
        上传文件:multipart/form-data
        不建议使用:text/plain
-->

input

input 的(type)类型有很多,以下介绍一些常用的类型

  • 文本框 text
  • 密码框 password
  • 单选框 radio
  • 复选框 checkbox
  • 提交按钮 submit
  • 重置按钮 reset
  • 普通按钮 button
  • 文件 file
  • 隐藏域 hidden
<form action="" method="">
    <p>用户名:<input type="text" name="username" placeholder="请输入用户名"></p>
    <p>密码:<input type="password" name="password" placeholder="请输入密码"></p>
        <p> 性别 :
           男 <input type="radio" name="gender" value="male">
           女 <input type="radio" name="gender" value="female">
        </p>
          <p> 爱好:
           coding <input type="checkbox" name="hobby" value="coding">
           阅读 <input type="checkbox" name="hobby" value="read">                    
           游戏 <input type="checkbox" name="hobby" value="game">          
           睡觉 <input type="checkbox" name="hobby" value="sleep">
       </p>
    <!--
        placeholder h5新增属性
        readonly 只读
        disabled 禁用
        autocomplete 自动完成
        autofocus 自动激活
        radio(单选)
            name 相同name只能选择一个
            value 表示选中的值
        checkbox
            name 区别不同选项
            value 返回选中的内容
       checked 选中 (写什么都可以选中  一般写true)
    -->
    <fieldset>
        <legend>表单组1</legend>
    </fieldset>
</form>

textarea 文本域

不是已经有 <input type="text" > 了吗?为什么还需要 textarea,注意, <input type="text" > 文本框,无论给多大多宽高,都只能输入一行,不能换行输入

<textarea name="personal" style="resize: none;width: 100px;height: 100px;"></textarea>

select 下拉框

<!-- size 表示显示几个-->
<select name="size" id="size" size="1">
    <option value="1">s</option>
    <option value="2" selected>m</option>
    <option value="3">l</option>
    <option value="4">xl</option>
    <option value="5" >xxl</option>
    <option value="6">xxl</option>
</select>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容

  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 10,987评论 46 548
  • 查看作者原文 一、前端开发做什么 传统前端:html+css+js HTML5大前端:各种端的兼容开发、Ajax+...
    秋风喵阅读 591评论 0 2
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 1.HTML、XML、XHTML HTML 超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可...
    姚小帅阅读 330评论 0 1
  • 万历援朝,奠定了此后三百年的东亚格局。此役中,朝鲜、日本、明朝三国的表现可圈可点,那当时的陆战之王到底花落谁家? ...
    未陌生过阅读 1,103评论 0 3