mengyang63 / web Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 40 KB

web development

HTML 22.74% JavaScript 50.60% CSS 26.66%

web's People

Contributors

Watchers

web's Issues

HTML-1

HTML basic structure

- 文档声明 <!DOCTYPE HTML>
- HTML 文档 <html></html>
    页头<head></head>
    页尾<body></body>

1.1 head 标签

<title> 定义网页的标题
<meta> 重要属性：name, http-equiv
- name: keywords, description, author, copyright
- http-equiv: 定义页面语言， 实现页面的自动刷新
<style>, <link>, <base>

1.2 注释
2. 段落和文字

标题标签<h1 - h6>
段落标签<p><-p> 换行标签<br/>
粗体标签<strong> 斜体标签<em><cite>上标标签<sup> 下标标签<sub> 字号标签<big>
<small> 删除标签<s> 下划线标签<u>
水平线标签<hr/>
div标签
特殊符号 &nbsp空格
常见的自闭和标签 <hr/> <br/> <meta/> <link/>
block <div> <h1-h6> <p> <hr>
inline <em> <s> <u>

列表

- 有序列表 
<ol><li></li></ol>      Type = 1. a, A, i, I
- 无序列表
<ul></ul> Type = disc, circle, square 
里面的元素只能是<li>
- 定义列表
<dl>
<dt></dt>
 <dd></dd>
</dl>

表格

<table>（表格）
<tr> <td></td>(单元格)</tr>（行）
</table>
表格标题<caption></caption>
表头(table head) 粗体和居中表示其中的元素<th></th>
表格语义化 thead, tbody, tfoot
行合并 <td rowspan ="number">
列合并 <td colspan = "colspan">

图像

图片标签img <img src = "图片地址" alt = "图片描述（搜索引擎看）" title ="图片描绘（用户看）">
图片格式：
位图：8，16，24，36位图，格式：jpg, png(支持透明信息), gif,
：当处理色调复杂、绚丽的图像时，如照片、图画等，使用使用JPG格式；而处理一些logo、banner、简单线条构图的时候，适合使用PNG格式；GIF格式通常只适合表达动画效果。
矢量图 不失真

超链接

a标签<a href = "超链接地址">超链接文字</a>
target 属性 <a href = ‘链接地址’ target = "目标窗口的打开方式"> 超链接文字 </a>
内部链接 
锚点链接 1.目标锚点的id名称 2.超链接部分

表单

<form>表格各种标签</form>
form的标签属性:
- name  <form name = "表格名称"> </form>
- action <form action = "表单的处理程序">
- 传送method <get><post>
- form 的显示方式target <form target="目标显示方式">
- 编码方式
- 表单对象 <input> <textarea> <select> <option>

input 类型：
- text 属性<input type = "text" value = "默认文字", size = “文本框长度” , maxlength = “最多输入字符”/>
- password属性 <input type = "password" value = "默认文字", size = “文本框长度” , maxlength = “最多输入字符”/>
- 单选按钮 <input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>
- 复选按钮 <input type = "checkbox" value = "复选值属性" checked = "checked"> (must use with <label for "checkbox1">苹果</labe;>)
- 图片域 <input type="image" src="图像的路径"/>
- button <input type="image" src="图像的路径"/>
- submit <input type="submit" value="提交按钮的取值"/>
- reset <input type="reset" value="重置按钮的取值"/>
- 隐藏域hidden <input type = "hidden"/>
- 文件域 file <input type = "file"/>
- 多行文本框textarea <textarea rows = "行数" cols = "列数">多行文本框内容</textarea>
(三大文本框： 单行文本框/密码文本框/多行文本框)
- 下拉列表 <select multiple = "multiple" size = "可选择的数目"> <option>选项显示的内容 </option></select>
(multiple 表示可多选，size表示展开后可见的选项的数目)

多媒体

- 网页插入音频和视频 <embed src ="多媒体文件地址" width="1" height = "1"/>
- 网页插入背景音乐<bgsound src="file address" loop=“infinite”/>
- 网页插入flash <embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度"></embed>

浮动框架'
<iframe src ="浮动框架的源文件" width="宽" hight="高" scrolling="取值"></iframe>

CSS

CSS 的3种引用方式：

- 外部样式表
- 内部样式表
- 内联样式表

元素的id和class

- 一个标签可同时定义多个class，但不允许出现相同的id
- 元素选择器 div(选择符){width:100px（声明）} （选中的元素对应同一个CSS样式）
- id选择器 #box（选择符）{width:100px(声明)} （id名面前必须加上前缀“#”）
- class选择器 (class选择符前缀).red(class名称)={color(属性):red(属性值)}
- 子元素选择器 #father(父元素选择) #p1(子元素选择){color:red}
- 相邻选择器 #lv + div {color:red} 选择选中元素的下一个兄弟元素
- 群组选择器 h3,div,p,span{color:red} 两个选择器之间必须用“，”

文字样式

font-family: 字体1，字体2，字体3
font-size: large, medium, small
color：颜色值（关键字查找，16进制RGB查找）
font-weight:粗细值(normal, lighter, bold, bolder,或直接输入数字)
font-style: normal, italic(字体的一个属性), oblique(使没有斜体属性的字体变斜)
CSS注释: /* 注释的内容*/

文本样式

text-decoration: none, underline, line-through, overline
text-transform: none, uppercase, lowercase, capitalize
font-varient: normal/small-caps
text-indent(缩进): px value
text-align: left, center, right(文本水平对齐)
line-height(行高): px value
letter-spacing, word-spacing: px value

边框样式

border属性: border-width, border-style(none, hidden, solid, dashed, dotted, double), border-color
border: 1px, solid, Red
border-top, border-bottom, border-left, border-right

背景样式

background-color: 颜色值
background-image:url("图像地址")
background-repeat: 取值 (no-repeat, repeat, repeat-x, repeat-y)
background-position: x px,  y px (top/bottom; left/right/center)
background-attachment: scroll/fixed

超链接
去除超链接下划线: text-decoration: none;

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.