html5

作者: Chasingcar_501 | 来源:发表于2019-06-29 17:32 被阅读0次

HTML5语法，标签，属性
HTML5常用的标签
初识HTML5
HTML5基本介绍
HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
HTML5视频与音频
PHP从入门到精通，034第三章HTML5+CSS3——HTML

<!DOCTYPE html>声明文档类型是html5，帮助浏览器正确显示文档

样式表插入方法：

外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表

<style type="text/css">
    p{margin-left:20px}    
    </style>

内联样式表
<p style="color:red">

html链接

链接数据（文本链接、图片链接）
属性：
href属性：指向另一个文档的链接
name属性：创建文档内的链接
img标签属性
alt：替换文本属性(如果图片无法显示，以alt内容代替)
width、height

//点击图片跳转/
<a href="http://www.baidu,com">
  <img src="html.png" alt=”html图片”>
</a>

//name属性创建文档内链接，百度百科内常见
<a name="tips">hello</a>
<a href="#tips">跳转到hello</a>

html列表

无序列表
标签：<ul>、<li>
属性：disc、circle、square

<ul type="square">
  <li>ios</li>
  <li>android</li>
</ul>

有序列表
标签：<ol>、<li>
属性：a、A、l、i、start(与上例同，在type属性处修改)
嵌套列表
标签：<ul>、<ol>、<li>
li里可以嵌套ul，有序无序可嵌套
自定义列表
标签：<dl>、<dt>、<dd>

html块

html块元素
块元素在显示时，通常会以新行开始。如<h1>、<p>、<ul>
html内联元素
内联元素通常不会以新行开始。如<b> <a> <img>
html<div>元素
块元素组合html元素的容器
html<span>元素
<span>元素是内联元素，可作为文本容器

html布局

table布局

//颜色要写在style里
//等号不是冒号
 <table width="100%" height="950px" style="background-color: grey">

完整布局

//去掉四周边距
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: grey">
        <tr>
//如果没有colspan属性，则默认为1，header与下一行第一个td一样宽，即使设置width为100%也不能占满整行
            <td colspan="3" height="10%" width="100%" style="background-color:aqua">header</td>
        </tr>
        <tr>
            <td height="80%" width="20%" style="background-color: bisque">menu</td>
            <td height="80%" width="60%" style="background-color: blueviolet">content</td>
            <td height="80%" width="20%" style="background-color:yellowgreen">ps</td>
        </tr>
        <tr>
//此处colspan同理
            <td colspan="3" height="10%" width="100%" style="background-color:violet">footer</td>
        </tr>
    </table>
</body>