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)段落标签

<p>段落标签</p>,

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

&nbsp; -- 空格
<b></b>或者<strong></strong> -- 加粗
<br /> -- 换行

(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>
如图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。