What is HTML?
Baidu Encyclopedia: https://baike.baidu.com/item/HTML/97049
concluded: "hypertext" is within the means that pages can contain images, links, and even music, programs and other non-text elements.
Hypertext Markup Language. HTML is used to develop web pages. (Page suffix html, htm) html markup language is not a programming language.
Hypertext: hypertext, regressed more than the text, the text can be more rich presence information.
Tags: also known as tags, this is a basic html syntax inside, all structures are controlled by the mark.
Why learn HTML?
In JavaEE development of HTML pages bear part of the development. (+ JavaEE web designer engineer)
in the team will have a dedicated person to do web development, then why do we need to learn HTML? Although we do not need to develop attractive web page, because we need to get people to develop a good website, and people can see the page code, after subsequent development, so we need to have knowledge of HTML and other web front end.
Audience This course?
Page zero-based introductory course
Web front-end engineer
JavaEE Engineer
PHP Web Engineer
Python Web Engineer
.net Web Engineer
html xhtml html5
What development tools?
notepad ++
Notepad word sublime dreamweaver
The word does not meet how to do?
Queries own dictionary (way dictionary), take notes!
html version: XHTML html5 html
http://www.w3school.com.cn/h.asp
create an HTML file first?
Which displays Hello World.
Display additional content.
How richer control on this page?
By marking
What are tags?
Is the start tag is the end tag, xxx is the tag name
Syntax Notation One of the
pairs of tags, you must have a start tag must have an end tag.
Marking the end of a single direct, xx is the tag name.
Not case sensitive
all the tags and tag attributes are text input
Yufa (html is not rigorous, in very many cases, can be identified under,
such as case, which marked spaces, do not write the closing tag
we write time , as tightly as possible one o'clock!)
HTML syntax is more casual, in many cases, you can test the effect on their own.
The basic structure of the page
Document Type Declaration
On the first linehttp://www.w3school.com.cn/tags/tag_doctype.asp
page encoding declaration
The title tags
n from 1 to 6, becomes gradually smaller. (Acceleration, line spacing, were individually)
Note
<!--这里是注释-->
Level
<hr/>
Wrap
<br/>
Paragraph tag (sub paragraph, wrap, with a pitch other paragraphs)
<p alight="left center right justify"></p>
Pre-format tag
<pre></pre>
Tag attributes (can have multiple attributes, regardless of the order)
<xxx name="value"></xxx>
<xxx name="value"/>
Fonts
<font></font>
<font color="red" size="1~7" face="字体幼圆"></font>
Modified tags
加粗 <b></b> <strong></strong>
倾斜 <i></i> <em></em>
下标 <sub></sub> <sup></sup>
Display special symbols
http://www.w3school.com.cn/html/html_entities.asp
空格
image
<img src="xx/xx/xx.jpg" align="right middle left" width = "xxxpx 90%" height = "xxxpx 10%" alt="解释" />
If you use a percentage of the time it is a percentage of the size of the parent container
alt role: http://www.w3school.com.cn/tags/att_img_alt.asp
alt conducive to search engine search
Relative and absolute paths
path =
当前路径./xx.jpg
上一级路径../xx.jpg
上上一级路径../../xx.jpg (相对路径就是从当前路径寻找，当前路径只的是当前html所在路径)
下一级路径 xx/xx.jpg
path="C:\Users\souke\Desktop\web01\01.jpg"
In general the project uses relative paths
w3dschool HTML tutorial (as the dictionary can be queried)
http://www.w3school.com.cn/html/index.asp
can search for their own w3cschool offline manual
Unordered list
<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered list
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
Custom List
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>
hyperlink
<a href="http://www.baidu.com" target="">百度</a>
<a href="web02.html">百度</a>
The machine can be a page, it can be any web address (internal links or external links)
air link
href="#"
Hyperlinks can be added to the text or picture
target
_self _blank _top _parent
The title attribute
prompt text hand on a link displayed when the
name attribute
is defined anchor name
Jump to anchor
(you can use a text or a picture as an anchor, you can also define an empty anchor)
href="#锚名"
Jump to the anchor position of other pages
href="xxx.html#锚名"
Mail Links
<a href="mailto:[email protected]">给我发</a>
File download
<a href="xxx.zip">下载</a> 浏览器会根据链接类型，决定是否下载.
Blank
-------------------------------------------- The second chapter
table tr: table row td table data
<table border="1px" width="34px xx%" height="12px" align="center" bgcolor="red" cellspacing="3px" cellpadding="10px">
<tr height="23px" bgcolor="#00ee90">
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
property border on the table width height align bgcolor cellspacing cellpadding
attribute align the horizontal alignment of the vertical alignment tr valign bgcolor width height
attribute on td height bgcolor
Table merge operations
with multiple columns
Merchandise sales this month on month sales sales sales phone 100 500 200 400 notebook 20045045700
percentage
Gerry surface unit can be nested spreadsheet
nested form is a complete form
to be placed td, face a single cell.
Header table
results: Content centered, bolded
Note: there may be a plurality of header
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| 100 | 200 | 300 |
| 400 | 500 | 600 |
Layout table
layout do siki college courses page
How to view the page source code
F12 debugging
------------------------------------------------ form
their own write again, there is the impression you can, and do not mind not back, and then query the subsequent encounter
Form the role of
registered account
login account
published topic
post questions
Summary: need to enter information, and submit it to the local server's
role is to form the information entered by the user, sent to the server for processing.
Form tag
In the form which can contain a variety of other tag label text boxes, text fields, lists, radio buttons, check boxes, the one or more buttons ...... composition to form ainput 输入
textarea 文本域
select 下拉列表
option 下拉列表的项
button 按钮
…
input 可以做文本输入框，按钮，文件，单选按钮，复选按钮
<input type="" name="" />
text 文本
password 密码
file 文件
checkbox 多选按钮
radio 单选按钮
button 按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
image 图片
<input type="text" /> text和password
其他属性
name 名字
maxlength 最大字符长度
value 默认值
placeholder 提示信息
Single box
<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>
Check box
<input type="checkbox" name="hobby" value="reading" checked />
Button (push button, submit button, reset button)
<input type="button" name="" value="普通按钮" />
<input type="submit" name="" value="" />
<input type="reset" name="" value="" />
Picture submit button buttons
<input type="image" name="image_submit" src="xxx.jpg" />
Hidden Field
<input type="hidden" name="" value=""/>
drop-down list
<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
Example: Select the month, the city selected
Text fields
<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>
form表单属性
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）
name 表单名字
target _self _blank
提交一个表单，相当于点击了一个超链接，打开了一个新的网页，不过通过表单的方式请求
网页的时候，这个请求里面是带有数据的。
enctype [http://www.w3school.com.cn/tags/att_form_enctype.asp](http://www.w3school.com.cn/tags/att_form_enctype.asp)
---------------------------frame
<frameset cols="25%,75%"> rows上下划分 cols 左右划分
<frame src="frame_a.htm"/>
<frame src="frame_b.htm" name="myname"/>
</frameset>
frame's name, can be used as a hyperlink target (target)
Note: You can not use both the label and the label!
