HTML基础2

课程内容

  • meta、外部样式、外部Javasript、样式的三种写法
  • 文本的字体、字体样式、颜色、背景样式字体大小、对齐方式
  • 链接打开方式、链接跳转定位、链接的样式
  • 表格、表格样式
  • 列表、列表样式
  • div、div宽高边框背景样式、文本水平居中
  • 块级元素、行内元素

meta

  • 搜索引擎定义关键词:

<meta name="keywords" content="前端、饥人谷、Java">
  • 网页定义描述内容

<meta name="description" content="饥人谷,最专业的互联网技能教育">

代码

样式的三种写法,JS两种写法

  • (浏览器缺省设置)
  • 外部样式表

<link rel="stylesheet" type="text/css" href="index.css">
  • 内部样式表(位于 标签内部)

<style type="text/css">
    p{color: red; }
</style>
  • 内联样式(在 HTML 元素内部)

<p style="color: blue; font-size:14px;">段落</p>
  • 内部JS

<script>
    console.log("hello");
</script>
  • 外部JS

<script type="text/javascript" src="index.js"></script>

代码

文本

  • 字体

font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
  • 颜色

color: #eee; /*red, #ff00ff 
  • 大小

font-size: 20px;
  • 风格

font-style: italic; /*斜体, normal:正常*/
  • 粗体

font-weight: bold; /*700*/
  • 位置

text-align: left; /* center right justify; */
  • 间距

line-height: 20px;

代码 caniuse - 其他:

//首行缩进
text-indent: 2em;
//折行
word-wrap:break-word;

链接

代码

<a href="http://hunger-train.com">hunger</a>

一个未访问过的链接显示为蓝色字体并带有下划线,访问过的链接显示为紫色并带下划线,点击链接时,链接显示为红色并带下划线

  • 新窗口打开链接target="_blank"

<a href="http://hunger-train.com" target="_blank">hunger</a>
  • 去掉下划线

a{
    text-decoration: none;
    color: red;
}
  • 跳转到锚点

<a href="#tips" target="_blank">hunger</a>
...
<p id="tips">点击链接跳转到这里</p>
  • css伪类,次序不要放反

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

表格

代码

  • 用于显示表格,不建议用于布局th是表头,tr是行,td是列
  • border-collapse: collapse; 边框为单线
  • width: 100%; 横向满屏
姓名 性别
小明
小花
table{
  border-collapse: collapse;
  width: 100%;
}
th{
  background-color: #22aaaa;
}
th, td{
  text-align: center;
  border: 1px solid green;
  line-height: 30px;
}    

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小花</td>
        <td>女</td>
    </tr>
</table>

列表

代码

  • 列表用处:用于展示一列相近的元素
  • 清除列表默认样式: list-style: none;
  • 列表是可以嵌套的

写法:

<!--有序列表-->
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>


<!-- 无序列表 -->
<ul>
    <li>无序列表,用的最多</li>
    <li>无序列表</li>
</ul>

<!-- 自定义列表-->
<dl>
    <dt>列表头</dt>
    <dd>列表内容</dd>
    <dt>列表头</dt>
    <dd>列表内容</dd>
</dl>

自定义列表使用参考这里

div

  • html里使用最多的标签,用于页面结构划分,页面分区
  • 比如一个典型的网页分为头部,内容,尾部;内容可分为侧边栏和主体内容,如

<body>
    <div id="header"></div>
    <div id="content">
        <div class="sidebar"></div>
        <div class="main"></div>
    </div>
    <div id="footer"></div>
</body>
  • html写法是先把页面分大区块,每一大块再分成小块,再细化...
  • html的语义化:选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
  • div样式

<style type="text/css">
    div {
        width: 100px;  /* 宽度 */
        height: 100px; /* 高度 */
        border: 1px solid red; /* 边框 */
        text-align: center; /* 内部文本居中 */
        background-color: blue; /* 背景颜色*/
        color: white;    /* 字体颜色 */
        border-radius: 4px;  /* 圆角 */
    }
</style> 

代码

块级别元素、行内元素

  • 块级元素占用空间是一整行,行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示,块级元素不能。
  • 块级元素:div、p、h1...h6、table、tr、ul、li、dl、dt、form
  • 行内元素:a、span、img、input、button、em、textarea

详细解释参考这里

查看代码