01 HTML基础

1.web基础

web标准:(万维网-w3c:)

  结构标准:HTML -- 决定网页上有什么内容
  表现标准:CSS -- 决定网页上内容的布局和显示方式
  行为标准:JavaScript -- 决定网页上动态的效果

HTML

html--超文本标记语言(可以用来标记文本, 图片, 视频, 音频, flash, 按钮, 输入框等内容).
html不是编程语言,不会编译执行,语法错误也不会报错导致程序不能往后运行
html语法不区分大小写
HTML版本

广义的H5:指HTML5+CSS3+js
狭义的H5:HTML5
标签/标记
- a.双标签(常规标签)
 <标签名属性=属性值属性=属性值>内容内容</标签名>
- b.单标签
 <标签名属性=属性值属性=属性值 />
说明:
标签名:内置的命名,固定的,不能自己命名(注意:<和标签名之间不能留空白)
属性:属性和标签名之间用空格隔开,以属性=属性值的形式存在,多个属性之间也用空格隔开
(属性可以使html标准中的属性,也可以是自己定义的属性)
标签内容:是指开始标签和结束标签之间的内容.标签的内容可以是任何内容.

(1)标题标签

<h1>hello world</h1>
<h2>hello world</h2>

效果同markdown语法中的#和##(标题大小跟h后的数字有关)

(2)段落标签

段落标签,

a.一个p标签对应一个段落,段落之间默认有空行.
b.p标签里用回车,网页上显示出来的内容并不会换行. (空格只会生效一次)

(3)文本符号

-- 空格
或者 -- 加粗
 -- 换行

(4)超链接

网页上点击后可以跳转的标签都是超链接
href属性:跳转到对应的地址(可以使网络地址,也可以是本地地址)
a.网络地址
b.本地地址(当前工程里的其他htm文件路径)
c.如果为空,则刷新页面,回到页面顶部
d.选择器:让网页滚动到网页上的任意的位置
target属性:超链接的打开方式
a._self 在当前页面打开超链接(默认效果)
b._blank 在新的页面打开超链接
c._top 返回当前页顶部,但是前面的href要设置成#或者为空.

<a href="www.baidu.com">百度一下</a>
<a href="https://www.baidu.com" target="_blank">百度一下</a>

(5)图片

<img src="图片地址" />

src属性:(本地地址,网络地址)

本地地址:
a.绝对路径(相对于工程目录)
b.相对路径
网络地址:超链接
b.title属性:鼠标放上去时显示的提示信息
c.alt属性:如果图片加载失败,则用alt中的文字替代显示

<img src="./img/11.png" />
<img title="23333" src="./img/11.png" />
<img alt="图片加载失败" src="./img/1.png" />

效果如图:

图片.png

2.列表

根据要显示的内容可以选定不同的列表样式

<!--有序列表ol-->
            <ol>
                <li>语文</li>
                <li>数学</li>
                <li>英语</li>
            </ol>
        
        <!--无序列表ul-->
            <ul>
                <li>成都</li>
                <li>重庆</li>
                <li>达州</li>
            </ul>
        
        <!--自定义列表-->
            <dl>
                <dt>羊肉火锅:</dt>
                <dd>羊肉火锅不好吃</dd>
                <dd>羊肉火锅真的不好吃</dd>
                <dt>牛肉火锅:</dt>
                <dd>牛肉火锅很好吃</dd>
                <dd>牛肉火锅真的很好吃</dd>
            </dl>

如图所示

3.表格

table--代表一个表格( tr -- 代表一行, td -- 代表一列)
一个表格中可以有多行,一行有多列
表格的属性:

a.border:设置整个表格中边框的宽度
b.width:设置整个表格的宽度
c.height:设置整个表格的高度(每一行均分)
d.align:在table里面设置为center:让整个表格在其父标签中居中
在tr里面设置center,使这一行中的单元格内容居中
在td里面设置center,使得这个单元格的内容居中.其他无影响
e.cellpadding:设置单元格内容与单元格的间距
f.cellspacing:设置单元格和单元格之间的间隙
注意:所有的属性值都必须用""括起来
g.rowspan:跨行合并
h.colspan:跨列合并
实例:

<table border="1" cellspacing="0" cellpadding="0" width="800" 
            height="" align="center" style="text-align: center;">
            <tr height="40">
                <td>电子邮件</td>
                <td colspan="2"><a href="http://reg.163.com/UserLogin.do" 
                    style="text-decoration: none;" target="_blank">cuit2017@163.com</a></td>
                <td>手机号码</td>
                <td colspan="3"></td>
            </tr>
            <tr align="center">
                <td colspan="5" height="20" bgcolor="limegreen">教育经历</td>
            </tr>
            <tr height="40">
                <td colspan="2">起止时间</td>
                <td colspan="2">毕业院校/教育机构</td>
                <td colspan="3">专业课程</td>
            </tr>
            <tr height="40">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr height="40">
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
        </table>

如图