html基础

html结构

`<!DOCTYPE html>`

声明为 HTML5 文档

`<html></html>`

HTML 页面的根元素

`<head></head>`

浏览器解析的内容

属性	描述
`<meta>`	数据
`<title></title>`	文档的标题
`<style></style>`	设置CSS样式
`<link>`	外链式连接两个文档
`<script></script>`	JS脚本

`<body></body>`

显示页面主体内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen"></style>
    <script src="" type="text/javascript"></script>
</head>
<body>
    <h1>标题</h1>
    <hr>
    <p>段落</p>
</body>
</html>

标签类型

块元素block

也叫行元素，布局中常用的标签有，<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>、<li>、<hr>等都是块元素。

特点：

盒子占据一行，即时设置了宽度
支持全部的样式
如果，没有设置宽度，默认的宽度为100%

display:block；可以将元素转换块级元素。

内联元素inline

也可以称为行内元素，布局中常用的标签有，<a>、<span>、<br>、<i>、<em>、<strong>、<label>等

特点：

盒子并在一行，宽高由内容决定
支持部分样式（不支持宽高，margin上下不支持）
代码换行，盒子会产生间距
子元素是内联元素，父元素可以用text-align设置水平对齐，line-height属性垂直对齐

display:inline;可以将块状元素转换为内联元素

内联块元素inline-block

也叫行内块元素，布局中常用的标签有，<input>、<img>等

特点：不独占一行，支持全部样式

display:inline-block；float:left / right；position：absolute/fixed;可以将元素设置为内联块级元素。

超链接a标签

去掉a标签下划线

a {
  text-decoration: none;
}

target属性

_blank表示在新标签页中打开目标网页

_self表示在当前标签页中打开目标网页

href属性

绝对URL - 指向另一个站点（比如 href="http://www.baidu.com"）

相对URL - 指当前站点中确切的路径（href="a.html"）

锚URL - 指向页面中的锚（href="#top"）

添加锚点

1、通过id定位，格式为：# + id

<a href="#a0">定位</a>
</div>
<p>练习1</p>
<p>练习2</p>
<p>练习3</p>
<p>练习4</p>
<p id="a0">练习5</p>
<p>练习6</p>

2、给a标签添加name属性

<a href="#a01"></a>
</div>
<p>练习1</p>
<p>练习2</p>
<p>练习3</p>
<p>练习4</p>
<a name="a01"></a>
<p>练习5</p>

让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数，表示一个死链接。

<a href="javascript:void(0)" onclick="window.open('https://www.baidu.com/')">跳转百度</a>

href="javascript:function();

<a href="javascript:alert('haha')">百度</a>

常用标签

`<img>`标签

src属性：图片链接到对应地址

alt属性：用于加载图片未显示

用法：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。

<img src="./timg.jpg" title="这是熊猫图片" alt="熊猫图片" width="200px">

`<p>`标签

<p> 标签定义段落。</p>

注意：p标签虽然是块标签但是不可以嵌套别的块标签（如嵌套p标签，div标签等）。

`<div>、<span>`标签

标签块元素，表示一块内容，没有具体的语义。

<span> 标签内联元素，表示一行中的一小段内容，没有具体的语义。

单标签`<br>`、`<hr>`

标签	描述
`<br/>`	换行
`<hr>`	水平线

含语义的标签

标签	描述
`<em>`	行内元素，语气强调
`<strong>`	行内元素，语气强调
`<i>`	行内元素，斜体
`<b>`	行内元素，加粗
`<u>`	行内元素，下划线
`<s>`	行内元素，删除

特殊字符

内容	标识代码
空格	` `
>	`>`
<	`<`
&	`&`

列表标签

`<ol>`有序列表

type属性：

1 数字列表，默认值

A 大写字母 a 小写字母

Ⅰ大写罗马 ⅰ小写罗马

start属性：start="3"表示从第3个序号开始

<ol type="1" start="3">
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

`<ul>`无序列表（常用）

<ul>去点：

通过css样式 list-style: none;
通过type属性 type="none"

<ul type="none">
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ul>

type属性：

type	样式
disc	实心圆点，默认值
circle	空心圆圈
square	实心方块
none	无样式

注意：常用无序表签ul，有默认样式，li标签块级元素，独占一行。

定义列表

<dl>标签表示列表的整体。

<dt>标签定义术语的题目。

<dd>标签是术语的解释。

<dl>
    <dt>html</dt>
    <dd>页面的结构</dd>

    <dt>css</dt>
    <dd>页面的样式</dd>

    <dt>javascript</dt>
    <dd>页面的动作</dd>
</dl>

table表格

table包含thead（包含tr、th）和tbody（包含tr、td）。

table常用属性

属性	描述
width	宽度
height	高度
border	设置边框显示
cellpadding	设置表格内容距离边框距离
cellspacing	设置表格和表格之间的间距

单元格合并

colspan 设置水平方向一个单元格占据的高度

rowspan 设置垂直方向一个单元格占据的高度

单元格内容对齐方式：

align 水平 center right left

valign 垂直 top bottom

<!--表格标签，table声明一个表格，th表头，tr行，td列-->
<table border="1px">
  <caption>table title</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>职务</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>学生</td>
    </tr>
     <tr>
      <td>李四</td>
      <td>男</td>
      <td>设计</td>
    </tr>
  </tbody>
</table>

form表单

`<form>`标签

属性	描述
action	规定向何处提交表单的地址（URL）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称
target	规定 action 属性中地址的目标（默认：_self）
enctype	规定被提交数据的编码（有上传文件则必须使用为"multipart/form-data"文件转码）

`<input>`标签type

type属性值	状态	实例
text	输入文本	`<input type=text" />`
password	密码输入框	`<input type="password" />`
checkbox	复选框	`<input type="checkbox" name="dx[]" value="1">`
radio	单选框	`<input type="radio" name="sex" value="1" />`
submit	提交按钮	`<input type="submit" value="提交" />`
reset	重置按钮	`<input type="reset" value="重置" />`
button	普通按钮	`<input type="button" value="普通按钮" />`
file	文本选择框	`<input type="file" />`
hidden	隐藏输入框	`<input type="hidden" />`
date	日期输入框	`<input type="date" />`

`<input>`标签其他属性

属性	描述
name	表单提交时的“键”，不同于id属性
value	表单提交时对应项的值
checked	radio和checkbox默认被选中的项
placeholder	用于在text或password输入时的提示
readonly	禁用属性，不可编辑（text和password设置只读）
disabled	禁用属性，不可编辑（input通用）disabled="disabled"

`<select>`标签

属性	描述
multiple	布尔属性，设置后为多选，否则默认单选
disabled	禁用属性
name	表单提交时的“键”，不同于id属性
value	定义提交时的选项值
selected	默认选项

textarea多行文本

属性：rows：行数　　cols：列数

<textarea name="text" value="" placeholder="个人说明"></textarea>

label 标签

标记input的元素，<label> 标签的 for 属性值应当与相关元素的 id 属性值相同

<label for="username">用户名</label>
<input id="username" type="text" name="user" />

form表单案例

<form action="login.do?act=login" method="post" enctype="multipart/form-data">
<label for="user">用户名</label>
<input type="text" id="user" name="username" value="" placeholder="请输入用户名">
<br>

<label for="pwd">密码&nbsp;&nbsp;&nbsp;</label>
<input type="password" id="pwd" name="userpass" value="" placeholder="请输入密码">
<br>

<label for="man">男</label>
<input type="radio" id="man" name="sex" value="0">
<label for="woman">女</label>
<input type="radio" id="woman" name="sex" value="1">
<br>

    <p style="font-size:15px;color: darkkhaki" >最近出差的城市有：</p>
<ul type="none">
    <li><input type="checkbox" name="dx[]" value="0">天津</li>
    <li><input type="checkbox" name="dx[]" value="1">重庆</li>
    <li><input type="checkbox" name="dx[]" value="2">昆明</li>
    <li><input type="checkbox" name="dx[]" value="3">以上都没有</li>
</ul>

    <p style="font-size:15px;color: #778fbd" >你的学历：</p>
<select name="xl">
    <option value="0">初中</option>
    <option value="1">高中</option>
    <option value="2">大学</option>
    <option value="3">其他</option>
</select>
    <br>

<label for="file">上传文件:</label>
<input type="file" id="file" name="file">
<br>

<textarea name="text" value="" cols="40" rows="20" placeholder="个人说明"></textarea><br>
<input type="submit" name="submit" value="确定" >
<input type="reset">
</form>

posted @ 2018-10-10 11:54 飞火流鸢阅读(228) 评论(0) 收藏举报

刷新页面返回顶部

Loading

飞火流鸢

html基础

html结构

`<!DOCTYPE html>`

`<html></html>`

`<head></head>`

`<body></body>`

标签类型

块元素block

内联元素inline

内联块元素inline-block

超链接a标签

去掉a标签下划线

target属性

href属性

添加锚点

常用标签

`<img>`标签

`<p>`标签

`<div>、<span>`标签

单标签`<br>`、`<hr>`

含语义的标签

特殊字符

列表标签

`<ol>`有序列表

`<ul>`无序列表（常用）

定义列表

table表格

table常用属性

单元格合并

form表单

`<form>`标签

`<input>`标签type

`<input>`标签其他属性

`<select>`标签

textarea多行文本

label 标签

form表单案例

公告

Loading

飞火流鸢

html基础

html结构

<!DOCTYPE html>

<html></html>

<head></head>

<body></body>

标签类型

块元素block

内联元素inline

内联块元素inline-block

超链接a标签

去掉a标签下划线

target属性

href属性

添加锚点

常用标签

<img>标签

<p>标签

<div>、<span>标签

单标签<br>、<hr>

含语义的标签

特殊字符

列表标签

<ol>有序列表

<ul>无序列表（常用）

定义列表

table表格

table常用属性

单元格合并

form表单

<form>标签

<input>标签type

<input>标签其他属性

<select>标签

textarea多行文本

label 标签

form表单案例

公告

`<!DOCTYPE html>`

`<html></html>`

`<head></head>`

`<body></body>`

`<img>`标签

`<p>`标签

`<div>、<span>`标签

单标签`<br>`、`<hr>`

`<ol>`有序列表

`<ul>`无序列表（常用）

`<form>`标签

`<input>`标签type

`<input>`标签其他属性

`<select>`标签