温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Web开发(初级)- HTML基础

发布时间:2020-06-26 00:53:28 来源:网络 阅读:503 作者:搜索无人区 栏目:开发技术

HTML简介 

  HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:django模版引擎)

Web开发(初级)- HTML基础Web开发(初级)- HTML基础

HTML文档

Doctype

<!DOCTYPE html>  /* 推荐 */

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

  1. 页面编码(告诉浏览器是什么编码)
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta charset="UTF-8">
  2. 刷新和跳转
    
    <meta http-equiv="Refresh" Content="30">
    <meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" />  /* 这句话很厉害的 */
  3. 关键词
    
    <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
  4. 描述
    例如:cnblogs
  5. X-UA-Compatible
    兼容IE8以下貌似
    
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title

网页头部信息

<title>it's title</title>

Link

  1. css
    
    <link rel="stylesheet" type="text/css" href="css/common.css" >
  2. icon
    
    <link rel="shortcut icon" href="p_w_picpath/favicon.ico">

Style

在页面中写样式

<style type="text/css"> 
.bb{ 
      background-color: red; 
   } 
</style>

Script

  1. 引进文件
    
    <script type="text/javascript" src="http://xxx/js/gpt.js"></script >
  2. 写js代码
    
    <script type="text/javascript" > ... </script>

常用标签

标签一般分为两种:块级标签 和 内联(行内)标签

  • a、span、select 等

  • div、h2、p 等

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落,默认段落之间是有间隔的!

br 是换行

a标签

1、target属性,_black表示在新的页面打开

<a href="http://www.baidu.com" target="_blank" >new page</a>
2、锚

<a href="#t31">各种符号</a>  /* 通过id来查找 */

H 标签

<h2></h2> --> <h7></h7>

select 标签

下拉菜单

<select><option>下线</option><option>在线</option></select>

radio

单选按钮(name一致,便为一组,只能选择一个选项)

<input type="radio" name="gender" value="man">
<input type="radio" name="gender" value="male">

password及text

<input type="text">
<input type="password">

button

<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">

file

<div id="t310">
    <h3>file</h3>
    <input type="file" value="file">
</div>

提交文件时要在 form 表单里加上: enctype='multipart/form-data' method='POST'

textarea

<textarea ></textarea>

label

<label for="name2">姓名:<input id="name2" type="text"></label>
<label for="marriy2">婚否:<input id="marriy2" type="checkbox"></label>

fieldset

<fieldset>
    <legend>登录</legend>
    <p>用户名:</p>
    <p>密码:</p>
</fieldset>

form 表单

<form method="POST" action="http://www.baidu.com">
    <input type="submit" value="submit">
</form>

一些补充

块级标签和内联标签

块级标签:<p><h2><table><ol><ul><form><div>

内联标签:<a><input><img><sub><sup><textarea><span>

block(块)元素的特点
① 总是在新行上开始;
② 高度,行高以及外边距和内边距都可控制;
③ 宽度缺省是它的容器的100%,除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素

inline元素的特点
① 和其他元素都在一行上;
② 高,行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度,不可改变
④ 内联元素只能容纳文本或者其他内联元素

对行内元素,需要注意如下 
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

额外知识点

  1、border-collapse: collapse;如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

  2、border-spacing: 5px; border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)

  3、caption 元素定义表格标题,caption 标签必须紧随 table 标签之后

  4、clear:both,在左右两侧均不允许浮动元素。

  5、<input type="radio" name="gender" value="male" checked> Male  checked会默认选上

  6、<option value="fiat" selected>Fiat</option> selected默认被选上的

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI