HTML入门

概述

HTML/CSS/JS

C/S和B/S架构

C/S架构
- client：客户端
- server：服务器
B/S架构
- browser：浏览器
- server：服务器

工具

编辑工具：notepad++
测试工具：chrome

原理

浏览器 => 服务器，发送请求，索要相关数据
服务器 => 浏览器，返回数据(响应)，然后浏览器解析收到的数据，就会出现相应的效果
组成：HTML、CSS、JS

HTML

说明：超文本标记语言，所见即所得
后缀：.html或.htm，统一使用.html

全局架构标签

示例：

<html>
    <!-- 注释 -->
    <head></head>
    <body></body>
</html>

说明：
- html：所有的内容都要放在该标签中
- head：存放头部，如：编码等
- body：有效的内容，会出现在网页中
body属性:
- text：字体颜色
- bgcolor：背景色
几乎每个标签都有的属性：
- class、name、id、style
- 可以在后面结合css及js使用
- 02-global.html

<html>
    <!-- 注释 -->
    <head>
        
    </head>
    <body text="red" bgcolor="blue">
        这是页面的内容
    </body>
</html>

字符实体

说明：在html中显示有特殊意义的内容，如：标签相关内容
字符实体：用特定的一串字符代表某一个有特殊意义的字符

示例：


<：  &lt;
>:  &gt;
空格: &nbsp;
&：  &amp；

参考：http://www.w3school.com.cn
03-shiti.html

<html>
    <head></head>
    <body>
        &lt;a&gt;百度一下&lt;/a&gt;
        sdhsk     jdksjaldj&nbsp;&nbsp;saldjasjdas
        &amp;
    </body>
</html>

常用标签(文本修饰)

h1 ~ h6：字体从大到小，表示标题，h1一个页面中最多一个，不要为了调整字体大小而使用。
加粗：b、strong
斜体：i、cite、em
下划线：u
中划线：s
下标：sub
上标：sup
字体：font
- size：大小
- color：颜色
- face：类型
换行及空格：
- br：换行标签，一段文本无论多长都不会换行，除非有用于隔断的空白
- 空格：无论多少个空格，解析后都会变成一个
- 回车：无论多少个，都会解析成一个空格
- 04-wenben.html

<html>
    <head></head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h3>三级标题</h3>
        <h6>六级标题</h6>
        
        正常字体
        <b>加粗字体</b>
        <strong>加粗字体</strong>
        <i>斜体</i>
        <cite>斜体</cite>
        <em>斜体</em>
        
        <u>鹅鹅鹅</u>
        
        <s>没用的东西</s>
        <br />
        内容<sub>下标</sub>
        内容<sup>上标</sup>
        <br />
        <font size="20" color="pink" face="宋体">这是一段需要修饰的文本</font>
        <br />
        asdh qwowiqrp iewp[peipeitopieptiepie [pwo[eoqw[oewpoeopwqpieoqo eiwueiouwqieuiwqueiuqwieuwiqueiwqueiuwiruy3reuwyiruefjsbjczn,nzksdlsjdaldjlajdlajkdlskaskdajdkjsadksahdjkashdjkshjdh sjkdajskhdklaljljwopwiouryutywey tiewiwotieytueyty
        
    </body>
</html>

常用标签(格式控制)

br：换行(单边标签)
p：段落
hr：分割线(单标标签)
marquee：滚动显示
pre：原样输出
ul：无序列表，每个元素都是li
- type：disc(实心圆，默认)，circle(空心圆)，square(实心方块)
ol：有序列表，每个元素都是li
- type：1、a、A、I
- start：起始位置
- 05-geshi.html

<html>
    <head></head>
    <body>
        女：在古代，姐的颜值可以撑起整个青楼<br />
        男：(若有所思)，你的意思是你长的像柱子
        <hr />
        <p>火箭（60-14）取得9连胜，队史首次单赛季达到60胜。詹姆斯-哈登只打了前三节，打出三双，贡献18分、15次助攻和10个篮板，埃里克-戈登22分，特雷沃-阿里扎14分，克林特-卡佩拉14分8个篮板，PJ-塔克12分。替补出场的杰拉德-格林得了25分7个篮板，周琦打了3分钟，得2分2个篮板，没有失误。火箭投中20记三分。[为周琦加油为火箭打call！篮球大师更多神迹等你来创造]</p>
        <p>老鹰（21-53）三连败，继续在东部垫底。陶里安-普林斯拿下了28分6个篮板，伊塞亚-泰勒26分，替补出场的泰勒-多西16分。【技术统计】</p>
        <hr />
        <pre>
        从今天开始，我们步入了新的阶段，进行学习
        主要的内容是前端，包括：html、css、js
        今天首先讲的时html，我对前端的认识加深了许多
        </pre>
    </body>
</html>

　　　　06-liebiao.html

<html>
    <head></head>
    <body>
        <ul type="disc">郑州市
            <li>二七区</li>
            <li>金水区</li>
            <li>中原区</li>
            <li>高新区</li>
        </ul>
        <ol type="I" start="3">
            <li>河南省</li>
            <li>河北省</li>
            <li>山东省</li>
            <li>山西省</li>
            <li>湖北省</li>
            <li>湖南省</li>
        </ol>
    </body>
</html>

练习：

每个标签至少3遍
建议：可以参考网页书写
有精力可以预习(适当的学习几个常用标签)，a、img、video、table、form、input

posted @ 2018-04-02 21:30 pythonsonline 阅读(143) 评论(0) 编辑收藏举报

刷新页面返回顶部

大蟒在线

HTML入门

HTML入门

概述

C/S和B/S架构

工具

原理

HTML

标签

全局架构标签

字符实体

常用标签(文本修饰)

常用标签(格式控制)

06-liebiao.html

练习：

公告